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

 作者:李东  浏览数:

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

div{
    width: 50px;
    height: 50px;
    background-color: blue;
}
div:hover{
    background-color: red;
}
div中hover的示例

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

:before和:after浏览器支持情况

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

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

div:after {
    content: "$$$$$$这里是添加的结尾";
    color: red;
}
:before和:after应用示例

这样就在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;
}
CSS八卦

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

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

相关文章