你们好，我给你们介绍一下，这是CSS伪元素:before与:after

时间 2019-11-15

原文原文链接

以前对于CSS伪元素的应用并很少，最近在用一款建站系统为客户作企业门户网站时，发现网页HTML代码中常常出现::before和::after。后经查资料才了解，这都是CSS的为元素。CSS 伪元素用于向某些选择器设置特殊效果。因此本文将和你们一块儿分享交流CSS的伪元素的使用知识。css

基本语法

所谓的伪元素，顾名思义他们并非真正的HTML元素。::before与::after用于向目标元素里内容的前面或后面添加内容。也许你已经注意到了，为何before与after的前面一会单个冒号，一会又两个冒号，有什么区别么？其实也没什么区别，只是CSS3中为了区别他们在HTML代码与CSS代码里的表现形式，将html中的伪元素显示为双冒号。在书写CSS代码时，若是不考虑过旧的浏览器兼容问题，不管是用单冒号仍是双冒号，结果都是同样的。html

这里要强调注意的是，这里所说的“前”与“后”，是指目标元素里面的内容的先后，而不是目标元素的先后。因此说，伪元素是目标元素的子元素。浏览器

咱们来看个示例：学习

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css" media="screen">
 6   div:before{
 7     display:table;
 8     content:"在段落前面添加内容";
 9   }
10   a:after{
11     display:table;
12     content:attr(href);
13   }
14 </style>
15 </head>
16 <body>
17   <div>
18     <p>这里是段落文本</p>
19     <a href="http://www.chanzhi.org">个人官网</a>
20   </div>
21 </body>
22 </html>

content是伪元素必不可少的一个属性。用于设置要添加的内容。这个内容能够是字符文本也能够是目标元素自身的某属性值。好比在上例中，a标签内容后添加了href属性值，即连接地址。显示效果以下：网站

实例应用

伪元素的做用固然不会仅限于此，实际应用中，咱们能够经过伪元素添加各类界面显示特效。这里咱们举一个常见的清除浮动的例子。以前咱们不少朋友清除浮动的方法是底部添加一个空div，采用clear:both；的样式。代码以下：ui

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css" media="screen">
 6   div.con_left,div.con_right{
 7     float:left;
 8   }
 9   .clear{
10     clear:both;
11   }
12 </style>
13 </head>
14 <body>
15   <div class="con_left"></div>
16   <div class="con_right"></div>
17   <div class="clear"></div>
18 </body>
19 </html>

如今经过伪元素，咱们能够作的更简便，不须要添加空元素。spa

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css" media="screen">
 6   div.con_left,div.con_right{
 7     float:left;
 8   }
 9   .content{
10     display:table;
11     content:"";
12     width:0px;
13     clear:both;
14   }
15 </style>
16 </head>
17 <body>
18   <div class="content">
19   <div class="con_left"></div>
20   <div class="con_right"></div>
21   </div>
22 </body>
23 </html>

小结：

经过:before与:after伪元素，咱们能够在CSS中设计出更多的样式特效。本文咱们一块儿分享交流了伪元素的使用，若是你们在平时实际应用过程当中有更好的案例，欢迎和你们一块儿分享交流。咱们共同窗习，共同交流，共同进步。设计