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

一、介绍

css3为了区分伪类和伪元素，伪元素采用双冒号::写法。

常见伪类——：

1. a标签的伪类：:link，:hover，:active，:visited。
2. 清除浮动使用的after伪类：:after 。
3. 结构性伪类选择器：:nth-of-type()，:nth-child()，:first-child，:last-child。

常见伪元素——：::before，::after  等等。

::before和::after下特有的 content 属性 ，用于在 css 渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在 css 渲染层加入。（不会出现在 html 结构中）

所以不要用 ::before 或 ::after 展示有实际意义的内容，尽量使用它们显示修饰性内容，例如 图标 icon ☎ ，参考代码如下：

    
        
        
        
    
    
        
1388888888
    

效果图如：

这个 图标icon 就是一个伪元素了。

值得注意的是：为什么 \260E 表示一个电话图标呢？

这些特殊字符的html，js和css的写法是不同的，具体可查看 HTML特殊字符的html、js、css写法汇总 ；

---

二、content 属性

::before 和 ::after 必须配合 content属性 来使用，content 用来定义插入的内容，content必须有值，至少是空。有个特点：默认情况下，伪元素是一个内联元素（即display:inline），可以通过设置display:block来改变元素特点；

列举一个伪元素，效果如下：

这个红色小竖条使用一个伪元素来实现。

参考代码如下：

	
	
	


	
追风筝的人

后台显示效果如下：

---

content 属性详细用法，请参考：https://www.cnblogs.com/starof/p/4459991.html