::before和::after伪元素的妙用

发布时间：2020-12-14 23:56:36 所属栏目：资源来源：网络整理

导读：场景： ???????? 假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折

场景：

???????? 假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在每个电话号码前都添加一个标签？这要整到猴年马月？搞不好还会出现标签浮动的问题。

这个时候::after伪元素和::before伪元素就是救星了，在css中有这么两个伪类，允许通添加伪元素在html元素前/后添加内容。

这里我简单写了一个demo

Document .phone-number::before{
content: '260E';
font-size: 22px;
color: red;
}
</style>
</head>

实现的效果如下

每一个号码都有一个class属性，我只需要对这个class属性写一次css渲染层和添增上

:: before伪元素就可以实现这个功能了。显然这比一个个添加标签要轻松得多。

可能有人会问，这个的符号是怎么来的？html官方规定了一些特殊符号的unicode码，具体可以看。

下面是:: before伪元素和:: after伪元素的具体用法和使用规则

（1）content:’()’

作用：在标签前/后添加字符串

使用规则：content后面一定要用‘’把要添加的内容括起来，否则是无法显示的（括号不一定需要添加）。

例如：

在

￥80元

之后添加如下css装饰代码：

（2）content:url(‘图片地址’)

作用：在标签前/后添加图片（图片通过网络url实时加载）

使用规则：必须用url()引入需要添加的图片，道理跟background的设置一样。图片的地址也需要用‘’括起来。

例如：

在

&emsp;10086

添加css装饰代码

（3）清除浮动

::after{

content : ’’ ;

display:block;

}

用法是设置content的为空字符串

关于清除浮动的一些可用方法有很多种，我在这里就不展开来说了。

用人可能会说，用法（1）在p标签后面添加内容，直接在html代码里面的p标签后面再增加一个p标签不就行了吗？为什么还要用这种方法呢？

可以思考一下，通过在后面添加一个p标签，同时也需要用css代码去装饰这个新添加上去的标签。显然，代码量上，后者比前者多了，而且后者在html中新增了一个DOM节点，如果数量很多时，解析器在解析时难免会增加一定的时间。而前者没有这种问题，而且还能更好实现表现层和样式层的分离式开发。

最后值得知道的是，使用::before和::after伪元素这种添加内容的方式，只是在css渲染页面的时候添加上去的，在DOM节点上是查不到这些添加上去的内容的。所以，一般不要添加实际的内容。意味着除了文本内容和图片/icon之外的html标签是无法添加进去的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!