html 伪元素作用,:before,:after伪元素妙用

本文作者：IMWeb 黎清龙

未经同意，禁止转载

这两个伪元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容，其实这没有什么前后的概念，如果应用了absolute的特性之后，你可以把这些伪元素放在任何位置，有了这两个伪元素，就代表每个元素都有两个助手可供使用，灵活运用它们的话将会得到很多有趣的实现，简化许多实现。

伪元素特性(目前已经遇到的)

它不存在于文档中，所以js无法操作它

它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter代表第一个字母；因此当伪元素被点击的时候触发的是主元素的click事件

块级元素才能有:before, :after，譬如img就不能设置，亦即某些元素是没有:before, :after的，只要知道一般的块级元素都可以用就行了

注：css3中，为了与伪类区分，伪元素前应该使用两个冒号，即:hover伪类，::before伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

各种图标

利用这两个伪类，可以实现需要简单的图标，例如搜索的放大镜，叉叉，箭头等等

//视频播放图标

.course[data-type="2"] {

.course__cover {

&:before, &:after {

content: '';

display: block;

position: absolute;

left: 5px;

bottom: 5px;

}

&:after { //实现圈圈

width: 20px;

height: 20px;

border: 2px solid white;

background: rgba(0, 0, 0, .6);

border-radius: 12px;

background-clip: padding-box;

}

&:before { //实现三角形

height: 0;

width: 0;

border-left: 8px solid white;

border-top: 5px solid transparent;

border-bottom: 5px solid transparent;

margin-left: 9px;

margin-bottom: 7px;

z-index: 5;

}

}

}

上述图标的效果如下图：

扩大可点区域

在mobile，特别是小屏手机，可点区域一般需要大一点，这样对用户友好一点。

当主元素实在没办法扩大自身的时候，可以利用:before, :after来实现可点区域的扩大，还记得伪元素的特性之一，伪元素属于主元素，点伪元素就是点击主元素。

//利用这个样式可以把可点区域扩大为40px宽，高度原理一样

&:before {

content: "";

display: block;

position: absolute;

width: 40px；

left: 50%;

margin-left: -20px;

top: 0;

height: 50px; //随便

}

实现效果如下图：

这个算是个综合例子，应用了多种技巧。这是一个收藏按钮，两种状态：已收藏和未收藏，正好符合checkbox，因此应用了checkbox，修改了样式给了一个底图。然后下面的文字是:after，利用了动态label的技巧(详见1.4)，然后:before应用了扩大可点区域技巧，使得40*50的区域内点击都有效。

实现label

对于一些静态的文字，说明性的文字，譬如最常见的上图下字单元，完全可以用:after实现那个文字。

还记得form家族的label标签吗？它的特性是label和input的联动，点击label元素就等同于点击input，这个效果和伪元素的特性是一模一样的，用:before完全可以替代label。

唯有一点是label独有的，就是label元素和input元素的位置相距较远，这种联动是伪元素无法实现的，毕竟伪元素还是要围绕主元素存在的，远距离absolute将会引发灾难的。

.empty__bg {

display: inline-block;

width: 95px;

height: 92px;

background: url(../../img/bg_empty_center@2x.png) no-repeat;

background-size: 95px 92px;

position: relative;

margin-bottom: 16px; //注意这里需要留好位置放置after元素(它是absolute进去的)

&:after {

content: "暂无学习计划";

display: block;

font-size: 14px;

line-height: 24px;

text-align: center;

width: 100%;

color: #909090;

position: absolute;

top: 100%;

left: 0;

}

}

实现效果如下图：

实现动态信息

如果你认为伪元素只能实现静态label，那就把CSS3想得简单了。

:before, :after的content属性的值除了是静态字符串之外，还有其他的一些特殊值，其中一个是attr(...)，这个特性的作用是用主元素的某个属性的值作为content的值，当这个属性的值改变的时候，伪元素的值也会跟着改变，利用这个特性就可以实现动态信息了。

可以有两种动态方案：

用js动态修改主元素的属性值，这个很直观

修改伪元素content关联的属性

下面看一个例子：

//html:

//22

//

23

//24

//core css

.datepicker__link {

&:before {

content: attr(data-monthStr);

}

&.z-active {

&:before {

content: attr(data-weekStr);

}

}

}

实现的效果如下图：

这里用到第二种动态方案，日期列表里面，日期上面默认显示月份信息，但是选中态需要显示星期信息。

预先把每个单元用到的月份信息和星期信息放到主元素的data属性上面(缓存的思想)，选中的时候一般都是要添加一个选中态样式，这时，除了基本的凸显性样式外，同时切换伪元素关联的data属性即可轻松地解决这个问题，而不用通过js去找到label元素，然后修改text。

小结

伪元素帮助我们选择那些有特殊意义，但是却无法具体定位的“东西”，它们对这些“东西”不做任何限制，它们只是代表这些特殊意义，譬如:first-letter，不限制首字母是哪一个字母，只是代表了首字母元素。

通过伪元素，可以让CSS更好的处理一些有特殊意义的元素，这些元素一般很难定位，甚至有些是代表状态的元素，譬如:target。

结合伪元素的特点，利用它们的灵活性，可以为我们提供更多的特性，下面总结一下目前想到的伪元素的优缺点：

优点/用途

减少dom节点数

让css帮助解决一部分js问题，让问题变得简单

缺点

不利于SEO

代码读起来“可能”会有疑惑