相关疑难解决方法(0)

为什么:before和:after伪元素需要'content'属性？

鉴于以下场景,为什么:after选择器需要内容属性才能运行？

.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;
}

Run Code Online (Sandbox Code Playgroud)

<div class="test"></div>

Run Code Online (Sandbox Code Playgroud)

注意在指定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";
}

Run Code Online (Sandbox Code Playgroud)