<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
border-color: #ccc;
}
.box{
margin-top: 200px;
}
.box::before{
content: "-在之前-";
}
.box::after{
content: "-在之后-";
}
</style>
</head>
<body>
<table width="400" border="1">
<tr>
<th>选择器</th>
<th>功能</th>
</tr>
<tr>
<td>:first-letter</td>
<td>操作当前元素的第一个字</td>
</tr>
<tr>
<td>:first-line</td>
<td>操作当前元素的第一行</td>
</tr>
<tr>
<td>::before</td>
<td>在之前插入,在一个盒子的内部最前面</td>
</tr>
<tr>
<td>::after</td>
<td>在之后插入,在一个盒子的内部最后面</td>
</tr>
</table>
<div class="box">伪元素</div>
</body>
</html>
转载请注明：大灰牛博客 » 伪元素before和after