after、before伪元素用法总结

前言

阅读本文前需要对before、after伪元素的基础概念有一定了解，若对此还很模糊，请先参考W3C CSS伪元素。

正文

重点概念回顾

1. 伪元素即”虚假的元素”，可通过CSS来控制，但无法在HTML源码中查看，也无法通过DOM来操作。

2. 伪元素必须设置content属性，否则无效。

3. 伪元素插入的位置是元素内容的首部或尾部。

4. 插入的伪元素默认为内联元素。

应用场景

常规用法

根据伪元素定义，可以得到最常规、朴素的用法，即在元素内容前后插入新内容。

<style>div:before {    content: "Hello";}div:after {    content: "!";}</style><div id="p">World</div>

最终渲染结果为 Hello World!

content属性内容除了字符串外，还可以通过url()渲染图像。

div:before {    content: url("img.jpg");    display: block;    width: 300px;    height: 300px;}

由于伪元素默认为内联元素，在渲染图像时需要显式地将它声明为块级元素。

此外还可以

div:before {    content: attr(id);}

通过attr()函数来获取元素某个特性的值。

清除浮动

利用伪元素来清除浮动是常规浮动清除的三种方式之一，也是最常用、最为推荐的一种方式。

直接上示例代码

<style>    .parent {        background: pink;        }    .clearfix:after {        content: "";        display: block;        clear: both;    }    .child {        background: #fd7654;        float: left    }</style><div class="parent clearfix">     <div class="child">test</div></div>

我们通过设置父元素的after伪元素可以很方便地对它进行浮动清除。

为元素设置边框

有时候我们想为元素设置某一方向的边框，但又不希望因此改变盒子的高度或宽度。实际上，我们完全可以利用伪元素来实现这一需求。

微信团队开源的WeUI大量使用了这一特性，这里将以WeUI的[九宫格](“https://weui.io/#grid“)为例，建议读者同时对照着源码来学习。

观察 class=”weui-grids” 的div元素，它设置了两个伪元素，我对其中的重点属性做了拷贝。

.weui-grids:before {    content: " ";    position: absolute;    left: 0;    top: 0;    right: 0;    border-top: 1px solid #D9D9D9;}.weui-grids:after {    content: " ";    position: absolute;    left: 0;    top: 0;    border-left: 1px solid #D9D9D9;    bottom: 0;

首先，为了方便理解，我们可以将伪元素看成一个普通的、空内容的内联元素，并设置position，使它脱离文档流。

接下来，我们通过设置top、right、bottom、left 四个位置属性，使伪元素在某一位置上拉长。如设置

{    left: 0;    top: 0;    right: 0;}

将使得伪元素在元素顶部水平拉长，默认为元素宽度的100%。

同理，设置

{    left: 0;    top: 0;    bottom: 0;}

将使得伪元素在元素左边竖直拉长，默认为元素高度的100%。

最后，只要恰当地设置伪元素的boder属性，我们就实现了脱离了文档流的元素边框。

这里需要注意，由于任何元素都只有before、after两个伪元素，所以对于同一元素，只能同时设置两个方向的边框。

总结

本文首先对伪元素的重点概念进行了回顾，然后根据作者的日常实践，总结了伪元素的三种用法。分别是
1. 常规用法
2. 清除浮动
3. 设置边框

---

由于作者水平有限，若文章存在错误，或你对文章内容有更好地补充，欢迎指正或提出建议，感激不尽。