::before/::after和:before/:after实质上效果一样

不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用。

参考:http://justcoding.iteye.com/blog/2032627

中间一般用的最多的是content,可以是文字content: '',也可以是资源content: url()。

不过经过测试,当为资源时,是无法设置大小的,所以,推荐用background去设置。

参考:https://segmentfault.com/q/1010000005664873

更多的用法研究参考:

http://www.w3school.com.cn/cssref/pr_gen_content.asp

http://justcoding.iteye.com/blog/2032627

http://www.cnblogs.com/ys-ys/p/5092760.html

css伪元素研究(::before/::after)的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  5. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  6. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  7. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

随机推荐

  1. node基础01:简要介绍

    1.node vs php 优点 性能高(机制问题) 开发效率高(省了不少优化的事) 应用范围广(可以开发桌面系统,electron框架) 缺点 新,人少 中间件少 IDE不完善 2.node的劣势和 ...

  2. Ionic实战四:ionic 即时通讯_ionic仿雅虎邮箱

    此产品是一款Ionic版微博.微信.朋友圈效果(微博.微信.聊天列表.聊天窗口.个人界面.编辑个人信息等)购买后二次开发方便快捷.    

  3. PAT1078 Hashing

    11-散列2 Hashing   (25分) The task of this problem is simple: insert a sequence of distinct positive in ...

  4. DOM与元素节点内联样式

    获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

  5. node 学习笔记 - Modules 模块加载系统 (2)

    本文同步自我的个人博客:http://www.52cik.com/2015/12/14/learn-node-modules-module.html 上一篇讲了模块是如何被寻找到然后加载进来的,这篇则 ...

  6. Quartz.NET 入门

    概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...

  7. 屠龙之路_假期罢工和公主私奔_SixthDay

    摘要:屠龙少年经过一周的长途跋涉后,终于来到了传说中的周末客栈.周末客栈是屠龙之路的必经之地,屠龙少年可以在周末客栈补给干粮,修补装备,好好休息一下,以便更好的上路.周末客栈有个不成文的规定:凡入住者 ...

  8. webkit webApp 开发技术要点总结

    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...

  9. android与网络的交互

    有三种方式: 数据下载,数据上传,数据浏览 URL中一些符号 ?分隔URL和参数 &URL中参数之间的分隔符 =URL中参数对应的值

  10. TCP/UDP,SOCKET网络通信,C++/Java实现

    趁这两天没事干,就把网络通信这一块搞一搞,C/S方面的了解一下,很重要! TCP Server/Client