:before选择器

在每个元素的内容之前插入新内容：

<p>小哪吒</p>

p:before{
    content: '我们的朋友：';
}

:before选择器和:after选择器一样，不过是一个在元素前插入新内容，一个在元素后插入新内容

h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11px;
    height: 24px;
    width: 4px;
    background: #0984e3;
}

图中的蓝色线就是用:before选择器写出来的