css中的:before和:after的使用

css中的:before和:after的使用

css中的伪元素before和after十分实用，但是W3Cschool和MDN中其实都只讲述了其行为的一部分。

首先先看看它们的基本用法：

用法（一）

当带有伪元素标签的元素没有子元素时，根据before和after将伪元素添加到该元素的前后。

css代码部分：

.after:after{
    content: 'after追加内容';
    display:block;
    color: rgb(0, 153, 255);
}
.before:before{
    content: 'before追加内容';
    display:block;
    color: rgb(255, 123, 0);
}
复制代码

html代码部分：

<p>正文内容,无class</p>
<p class="before after">正文内容，有class</p>            
<p>正文内容,无class</p>
复制代码

显示效果：

在chomre中查看element：

用法（二）

当带有伪元素标签的元素有子元素时，根据before和after将伪元素添加到该元素的子元素的最前和最后。

css代码部分：

.after:after{
    content: 'after追加内容';
    display:block;
    color: rgb(0, 153, 255);
}
.before:before{
    content: 'before追加内容';
    display:block;
    color: rgb(255, 123, 0);
}
复制代码

html代码部分：

<div class="before after">
    元素自身的text
    <p>p的父元素div设置了带有after的class</p>
    <div>和p平级content1</div>
    <div>和p平级content2</div>
</div>
复制代码

显示效果：

在chomre中查看element：

其中用法二最常见的使用方式是设置一个名为clearfix的类，后面跟一个after伪元素,用于清除浮动。

.clearfix:after{
    clear: both;
    display: block;
    content: "";
}
复制代码

这样就避免显式的增加一个div放在元素末尾，使得html语义化。

转载于:https://juejin.im/post/5c7e98325188251ba85fa076