[技术分享] 好用的伪元素:before和:after

作者：李东浏览数：次

提到伪类估计大家第一个在脑海中想起来的就是:hover,我们经常a标签上设置。能实现比较炫鼠标交互的效果。其实:hover也能作用于其他元素，例如在div元素上设置就能让鼠标在经过时候发生改变。可以试下一下。

div{
    width: 50px;
    height: 50px;
    background-color: blue;
}
div:hover{
    background-color: red;
}

这个不是今天说的重点，今天要说的是伪类:before和:after，关于这俩哥们刚开始的时候我还真是小瞧了他们，后来我还是逐渐重视它们起来。废话不说国际惯例先来介绍浏览器的支持情况。

所有的浏览器都支持，下面来说下它们的作用。:before和:after会在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

div:before {
    content: "这里是添加的开头#####";
    color: red;
}

div:after {
    content: "$$$$$$这里是添加的结尾";
    color: red;
}

这样就在div前面和后面添加了我们在content里面设置的东西。需要注意的是content可以为空，即content:""但是不能不设置，否则伪类无效。由于插入的内容默认是一个行内元素，并且在HTML源代码中无法看到（这就是为什么称之为伪类的原因），所以也就无法通过DOM对其进行操作。并且伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体、颜色等。我们的content里面不只能插入文本，还可以指定其他内容，例如图片等。

//html code
<p>我是P标签，由于:before和:after我前后都会有图片</p>
<a href="https://www.lidongtech.com/" >我是A标签因为:after我的后面会跟上我的链接地址</a>

//CSS code 
p:before,p:after{
    content: url("1.jpg");
}
a:after {
    content: attr(href);
}

很神奇是吧，发挥想象力吧！了解了:before和:after是不是有点要做什么的冲动？它们能应用的地方有很多。例如比较难搞的浮动float,我们都知道如果在一个元素内部的子元素设置了浮动，为了让子元素能将父元素给“撑”起来，那么必须在父元素的结束标签前面需要设置清除浮动clear:both;，老办法就是新建一个div然后引用浮动的类。这样会多一个毫无意义标签不说，在javascript操作子元素的时候还会出现莫名的BUG。

目前清除浮动比较流行的做法是：

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}
 
/* For IE 6/7 */
.clearfix {
    zoom:1;
}

在设置浮动的父元素的上引用.clearfix就能实现清楚浮动，很方便是吧。为什么里面会有display:table;？因为这样设置的:before和:after会作为块级表格来显示（类似），表格前后带有换行符。这样就能确保万无一失了。另外zoom:1;是IE6/7浏览器下清除浮动的方式。开下脑洞吧:before和:after还能实现更神器的效果。比较经典的例子就是用伪类实现八卦图了，下面放出代码：

#Gossip {
    width: 96px;
    height: 48px;
    background: snow;
    border-color: #444;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
#Gossip:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: snow;
    border: 18px solid #444;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#Gossip:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #444;
    border: 18px solid snow;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

如果你对截图有意见的话，我制作了一个DEMO可以看具体的代码和效果>>>猛戳这里<<<

转自：李东的技术博客 -《好用的伪元素:before和:after》。本文已得作者授权
原文地址：https://www.lidongtech.com/easy-use-before-and-after.html

Web 前端

[技术分享] 好用的伪元素:before和:after

相关文章