::befrore和::after伪元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容.其实没有什么前后的概念，如果应用了 absolute 的特性之后，可以把这些伪元素放在任何位置。
下面通过几个案例来学习如何使用这两个伪元素，下面的预览效果是真实渲染出来的，提供了相应的html和css代码。
1 对a标签加上特定的符号
效果预览：
链接前后加上标签
html：
<a>这是一个链接</a>
css：
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
2 表格选区
鼠标防止于某个内容区，会自动将横行和纵行显示为淡蓝色。
效果预览
表格中鼠标选区
html
<table border="1">
<tr>
<th>
表头1
</th>
<th>
表头2
</th>
</tr>
<tr>
<td>
表内容1
</td>
<td>
表内容2
</td>
</tr>
<tr>
<td>
表内容1
</td>
<td>
表内容2
</td>
</tr>
</table>
css
table{overflow: hidden;}
td, th{
padding: 10px;
position: relative;
outline: 0;
cursor: pointer;
}
td:hover::after,
th:hover::after {
content: '';
background-color: lightblue;
position: absolute;
left: 0;
height: 10000px;
top: -5000px;
width: 100%;
z-index: -1;
}
td:hover::before {
background-color: lightblue;
content: '';
height: 100%;
top: 0;
left: -5000px;
position: absolute;
width: 10000px;
z-index: -1;
}
3 图片说明
效果预览
图片下显示文字
html：
<div class="empty__bg"></div>
css
.empty__bg {
display: inline-block;
width: 95px;
height: 92px;
background: url(https://jiaruiblog.com/images/avatar.png) no-repeat;
background-size: 95px 92px;
position: relative;
margin-bottom: 16px;/*注意这里需要留好位置放置after元素（它是absolute进去的）*/
}
.empty__bg:after {
content: "暂无学习计划";
display: block;
font-size: 14px;
line-height: 24px;
text-align: center;
width: 100%;
color: #909090;
position: absolute;
top: 100%;
left: 0;
}
4.视频播放图标
<div class="play-cover">
</div>
播放器按钮
.play-cover {position: relative}
.play-cover:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
top: -4px;
left: -12px;
border-left: 9px solid white;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 12px;
margin-bottom: 7px;
z-index: 5;
}
.play-cover:after{
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -10px;
top: -10px;
border: 2px solid white;
background: rgba(0, 0, 0, .6);
border-radius: 12px;
background-clip: padding-box;
}
5.美化多选框
效果预览：
image.png
html
<input type="checkbox" id="checkbox" class="magic-checkbox">
<label for="checkbox">多选框</label>
css
.magic-checkbox {
position: absolute;
display: none; /*先隐藏真正的checkboxbox*/
}
.magic-checkbox + label {
/*为与checkbox搭配的label使用样式*/
position: relative;/*相对定位，方便其内容的伪元素进行定位*/
display: block;/*块元素*/
padding-left: 30px;
cursor: pointer;
vertical-align: middle;
}
.magic-checkbox + label:before {
/*label添加:before伪元素，用于生成一个带边界的正方形，模拟复选框的轮廓*/
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
content: '';
border: 1px solid #c0c0c0;
border-radius: 3px;
}
/*为checkbox添加:after伪元素，作用是生成一个√图形，模拟checkbox选中状态，未选中状态下会被隐藏*/
.magic-checkbox + label:after {
top: 2px;
left: 7px;
box-sizing: border-box;
width: 6px;
/*//实现√图形很简单：设置一个长方形，去掉其上边界和左边界，剩下的2个边界旋转45度就得到√形状*/
height: 12px;
transform: rotate(45deg);
border-width: 2px;
border-style: solid;
border-color: #fff;
border-top: 0;
border-left: 0;
position: absolute;
display: none;
/*//√形状先隐藏*/
content: '';
}
/*单击label，隐藏的checkbox为checked状态，这时设置checked状态下搭配label的:before伪元素背景和边界颜色*/
.magic-checkbox:checked + label:before {
animation-name: none;
border: #3e97eb;
background: #3e97eb;
}
/*checked状态的checkbox搭配的label伪元素:after此时设置显示，那么√就显示出来了*/
.magic-checkbox:checked + label:after {
display: block;
}
参考案例：
参考案例
参考资料
css伪元素:before和:after用法详解 http://www.cnblogs.com/wonyun/p/5807191.html
扩大可点区域http://www.alloyteam.com/2015/04/beforeafter%E4%BC%AA%E5%85%83%E7%B4%A0%E5%A6%99%E7%94%A8/
最简洁的代码美化复选框、单选框和滑动按钮http://segmentfault.com/a/1190000012407216
如果您觉得上面的内容对您有帮助欢迎点赞、评论、转发！
更多内容请查阅作者博客：https://jiaruiblog.com
或者star作者github: https://github.com/Jarrettluo?tab=repositories
网友评论