css伪元素理解及用法

什么是伪元素（Pseudo element）？

伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。

伪元素有哪些？

before,
after,
first-letter,
first-line

用于文本的
:first-line 伪元素
可以通过这个属性设置文本第一行的特殊效果，比如一段文字的第一行为红色，其他为黑色。

如果不通过这个方式来实现，就比较麻烦。因为屏幕适配的原因，你可能不能确定哪些文字属于第一行

:first-letter 伪元素
和first-line 相似，这个只是设置第一个字符的特殊效果。比如第一个字的字体比别的大

如果不通过这个方式实现，那么就可能还要处理对齐，这种实现方式更方便

:before 和 :after
before定位的基准是其主元素的右上角，
after定位的基准是主元素的结尾处。
当主元素没有内容时before与after仍会正常工作，属性为inline元素，
若需要设置高宽度等属性需要display：block;。
content是伪元素必需的属性，若伪元素没有内容，需赋值为空格：content: ’ ';
例子：用伪元素做一条分割线

设置display:flex，然后两个伪元素分别铺满剩余空间。

<div class="title">我是分割线</div>

.title{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
}
.title::before,.title::after{
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc;
}
.title::before{
    margin-right: 10px;
}
.title::after{
    margin-left: 10px;
}