css after没用

众所周知，CSS中的伪元素:after是非常常用的，它可以在选中的元素之后添加内容。但是，在某些情况下，使用:after可能并不是最优解决方案，甚至是无效的。

假设我们有一个div元素，需要在其中添加一个水平线。一种方式是使用如下CSS：

div:after {
    content: "";
    display: block;
    height: 1px;
    background-color: black;
}

这里使用了:after来创建一个空元素，然后设置它的高度与背景颜色，最终得到一条横线。但是，这样做有一个问题：如果div元素还需要指定其宽度，那么这条横线的长度就不能自动适应。

那么，有没有更好的方法呢？当然有！我们可以直接在div元素中添加一个子元素，如下所示：

div hr {
    height: 1px;
    background-color: black;
}

这样做的好处是显然的：子元素的长度可以根据div元素的宽度自动适应，而且代码更加简洁明了。

因此，当你需要在元素中添加内容时，不一定要选择:after或:before。根据实际情况选择最适合的方式，才能写出更加简洁、高效的CSS代码。