:after选择器

:after 选择器在被选元素的内容后面插入内容。

<p>我们的朋友：</p>

原始的
用:after选择器在p标签后边添加一个元素用content

p:after{
    content: '小哪吒';
}

就变成了这样：

用:after选择器添加元素后的
content必须存在，里边可以不写东西，但是必须有

.card_box h4:after{
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -10px;
    content: '';
    width: 20px;
    height: 1px;
    background-color: #333;
    transition:.3s;
}

下边那条黑线就是用上边代码写出来的