.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
}
<div class="test"></div>
请注意,在指定content属性之前,您如何看不到伪元素：
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
content:"hi";
}
<div class="test"></div>
为什么这是预期的功能？你会认为显示块会强制元素出现.奇怪的是,你可以看到Web调试器中的样式;但是,它们不显示在页面上.
解决方法
The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content.
The :before and :after pseudo-elements
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate,the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property,in conjunction with these pseudo-elements,specifies what is inserted.
Initial: none
This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:
none – The pseudo-element is not generated.
应用于:: before和:: after伪元素的样式会影响生成的内容的显示.内容属性是这个生成的内容,如果没有,内容的默认值为none,这意味着没有什么可以应用于样式.
如果你不想重复内容：”;多次,您可以通过CSS中的伪元素(JSFiddle example)之间的所有:: before和::全局样式来覆盖：
::before,::after {
content:'';
}
