场景：
假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在每个电话号码前都添加一个<img>标签？这要整到猴年马月？搞不好还会出现标签浮动的问题。
这个时候::after伪元素和::before伪元素就是救星了，在css中有这么两个伪类，允许通添加伪元素在html元素前/后添加内容。
这里我简单写了一个demo
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.phone-number{
font-size: 14px;
font-weight: 600;}
.phone-number::before{
content: '\260E';
font-size: 22px;
color: red;
}
</style>
</head>
<body>
<div class='phone-number'> 13300000000</div>
<div class='phone-number'> 13300000001</div>
<div class='phone-number'> 13300000002</div>
<div class='phone-number'> 13300000003</div>
<div class='phone-number'> 13300000004</div>
</body>
</html>
实现的效果如下
效果图
每一个号码都有一个class属性，我只需要对这个class属性写一次css渲染层和添增上
:: before伪元素就可以实现这个功能了。显然这比一个个添加<img>标签要轻松得多。
可能有人会问，这个的符号是怎么来的？html官方规定了一些特殊符号的unicode码，具体可以看http://www.cnblogs.com/starof/p/4718550.html。
下面是:: before伪元素和:: after伪元素的具体用法和使用规则
（1）content:’()’
作用：在标签前/后添加字符串
使用规则：content后面一定要用‘’把要添加的内容括起来，否则是无法显示的（括号不一定需要添加）。
例如：
image
在<p>￥80元</p>之后添加如下css装饰代码：
p::after{
content:'门市价100元';
font-size: 14px;
text-decoration: line-through;
color: grey;
}
（2）content:url(‘图片地址’)
作用：在标签前/后添加图片（图片通过网络url实时加载）
使用规则：必须用url()引入需要添加的图片，道理跟background的设置一样。图片的地址也需要用‘’括起来。
例如：
image
在
<div id='yidong-nub'>
<a href='http://www.10086.cn/images/index/logo.png'> 10086</a>
</div>
添加css装饰代码
a::before{
content:url('http://www.10086.cn/images/index/logo.png');
}
（3）清除浮动
::after{
content : '';
display:block;
}
用法是设置content的为空字符串
关于清除浮动的一些可用方法有很多种，我在这里就不展开来说了。
有人可能会说，用法（1）在p标签后面添加内容，直接在html代码里面的p标签后面再增加一个p标签不就行了吗？为什么还要用这种方法呢？
可以思考一下，通过在后面添加一个p标签，同时也需要用css代码去装饰这个新添加上去的标签。显然，代码量上，后者比前者多了，而且后者在html中新增了一个DOM节点，如果数量很多时，解析器在解析时难免会增加一定的时间。而前者没有这种问题，而且还能更好实现表现层和样式层的分离式开发。
最后值得知道的是，使用::before和::after伪元素这种添加内容的方式，只是在css渲染页面的时候添加上去的，在DOM节点上是查不到这些添加上去的内容的。所以，一般不要添加实际的内容。意味着除了文本内容和图片/icon之外的html标签是无法添加进去的。
转载自# ::before和::after伪元素的妙用
了解更多可点击# ::before和::after伪元素的用法
网友评论