肯定有一些我遗漏的东西,但我试图在我的 css 中使用 ::after
,但不幸的是它不起作用。
我的CSS代码如下。
.test {
height: 40px;
width: 40px;
background: #444;
}
.test::after {
position: relative;
top: 15px;
height: 240px;
width: 240px;
background: red;
}
<div class="test"></div>
最佳答案
你只需要将content: ''
添加到伪类:after 或:before 并将位置设置为绝对。
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
position: absolute;
top: 15px;
height: 240px;
width: 240px;
background: red;
content: ''
}
<div class="test"></div>
但是如果你想你可以在没有绝对值的情况下使用它,只需向它添加一些 float ,因为伪类的生成就像在父节点内部一样。
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
content: '';
background: red;
width: 10px;
height: 10px;
float: right;
}
<div class="test"></div>
但是如果你需要像图标一样使用它,在 block 内更好的方法是使用绝对值。
关于css - Using::after css 在下面不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39857687/