本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载
这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念,如果应用了absolute的特性之后,你可以把这些伪元素放在任何位置,有了这两个伪元素,就代表每个元素都有两个助手可供使用,灵活运用它们的话将会得到很多有趣的实现,简化许多实现。
伪元素特性(目前已经遇到的)
注: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的区域内点击都有效。
对于一些静态的文字,说明性的文字,譬如最常见的上图下字单元,完全可以用: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的值,当这个属性的值改变的时候,伪元素的值也会跟着改变,利用这个特性就可以实现动态信息了。
可以有两种动态方案:
下面看一个例子:
//html:
//<a class="datepicker__link z-today" href="void(0)" data-monthstr="04月" data-weekstr="周三" data-k="2015422"><span>22</span></a>
//<li class="datepicker__item"><a class="datepicker__link" href="void(0)" data-monthstr="04月" data-weekstr="周四" data-k="2015423"><span>23</span></a></li>
//<a class="datepicker__link z-active" href="void(0)" data-monthstr="04月" data-weekstr="周五" data-k="2015424"><span>24</span></a>
//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。
结合伪元素的特点,利用它们的灵活性,可以为我们提供更多的特性,下面总结一下目前想到的伪元素的优缺点: