摘要：伪元素被当做的样式来进行展现，用法和普通的元素用法是一样的。中的伪元素使用个冒号，在中，为了区分伪类和伪元素，规定伪元素使用个冒号。伪元素的特点优点不占用节点，减少节点数。不仅块级元素可以设置伪元素，大部分行级元素也可以。
1 什么是伪元素？
CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。
1.1 常用的伪元素和伪类伪元素和伪类的写法有点像，伪元素使用2个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
1.2 伪元素和伪类的区别伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加），伪类是给页面中已经存在的元素添加一个类。
1.3 CSS3中的伪元素在实际的开发工作中，有人会把伪元素用1个冒号来写，这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。
CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了。
如果不需要考虑IE8以下的浏览器，建议都使用2个冒号的新标准写法来写。否则还是使用1个冒号吧！
标准写法是双冒号（但考虑兼容性也有人写单冒号）
::before和::after在被选中元素里面、元素现有内容之前（后）插入内容，需要使用content属性指定要插入的内容。content必须有值（空值也行）。
content插入的内容默认是 inline 元素，可以通过display:block改变。
3 伪元素的特点 3.1 优点不占用 DOM 节点，减少 DOM 节点数。
让 CSS 帮助解决了一部分 JavaScript 问题，简化了开发。
不仅块级元素可以设置伪元素，大部分行级元素也可以。
避免增加毫无意义的页面元素。
3.2 缺点不利于调试。
伪元素不真正在文档内容中体现，只在视觉效果上体现，所以不能给伪元素添加具有实际意义的内容，这部分内容不会搜索引擎抓取。
4 content属性content 的值可以是空值、字符串、attr()、url()、uri()、counter()等，下面分别演示一下。
4.1 空值可以用来清除浮动。代码如下：
包含 cleafFix 这个类的元素，其内部的浮动可以被清除。
4.2 string（字符串）在电话号码前面添加一个电话的icon图标。代码如下：
HTML部分
13900001390
CSS部分
.phoneNumber::before{
content:"260E";
font-size: 16px;
}
效果展示：
小电话的图标是一个特殊字符，每个特殊字符都有特定代码，特定代码用在HTML中以 开头，用在 CSS 中以 ＼ 开头，用在 JS 中以 ＼u 开头。4.3 attr( ) 以及 url( )
比如这个电话图标，在 HTML 中用 ☎ 表示，在 css 中以 260E 表示，在 JavaScript 中，以 u260E 表示。
attr（）：可以调用当前元素的某个属性。
url（）：可以引用媒体文件（比如图片）。
演示代码：
HTML部分：
GOOGLE!
CSS 部分：
a::before{
content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
}
a::after{
content: "("attr(href)")";
}
a{
text-decoration: none;
}
效果预览：
例子中，content 中的 url 是引用媒体文件，所有不用加引号。4.4 counter 计数器
attr 是调用元素 href 属性当做字符串显示出来，所有要加引号。至于括号里面，如果加引号，就会显示出来 href 的值，如果不加引号就打印字符串 (attr(href))，我还不太清除加载括号里面的引号是什么用法。
counter 调用计数器，可以不使用列表元素实现序号功能。
counter 要配合 counter-increment 和 counter-reset属性使用。
counter-reset 给同级元素增加计数器，比如一个页面有多个H1元素，那就给body加计数器。一个H1元素里面有多个H2元素，那就给H1元素加计数器。counter-increment 增加计数器数值。
代码演示：
HTML部分：
哺乳动物
狗
猴子
猩猩
冷血动物
鱼
蛇
CSS部分：
body{
counter-reset: section;
}
h1{
counter-reset:subsection;
}
h1::before{
counter-increment: section;
content:counter(section)"、";
}
h2:before{
counter-increment: subsection;
content: counter(section)"."counter(subsection)"、";
}
效果演示：
通过以上实例可以看出：
动态的（会变的值）不加引号。
媒体不加引号。
固定的值、字符串需要加引号。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116823.html
摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。 一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...
摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...
摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...
摘要：下面是伪元素和伪元素的具体用法和使用规则作用在标签前后添加字符串使用规则后面一定要用把要添加的内容括起来，否则是无法显示的括号不一定需要添加。场景： 假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
阅读 3243·2023-04-25 17:35
阅读 2463·2021-11-24 09:39
阅读 2375·2021-10-18 13:32
阅读 3165·2021-10-11 10:58
阅读 1153·2021-09-26 09:55
阅读 5629·2021-09-22 15:47
阅读 779·2021-08-26 14:15
阅读 3285·2019-08-30 15:55
