几个css中的伪元素，它们在项目开发中用的并不多，但确实很有用，在项目中不用它，是因为大家不能了解它们。
以下是一个工作场景，如有四个按钮，分别是建立、编辑、删除和修改，要求这在前台显示的汉字是统一的，如果要改它们，就都要变的。
比如希望把建立改为"新建"，那么所有的建立都要改成新建，这代码量可是不小。
当然，如果这样写<a>建立</a>这改起来是挺麻烦的，而如果使用伪元素呢?
代码:<a class="create"></a>，而在页面上也会显示"建立"，而它就是通过伪元素来实现的。
一，元素前和元素后添加指定内容
复制代码 代码示例:
/* 在类名为read的a标签位置的后面添加查看字符,例如:<a class='read'>详细</a>,它的结果就是"详细查看" */
a.read:after {
content: '查看';
}</p> <p> a.del:after {
content: '删除';
}</p> <p> a.edit:after {
content: '编辑';
}</p> <p> a.create:after {
content: '新建';
}
html调用代码
复制代码 代码示例:
<a class="create"></a>
<a class="del"></a>
<a class="edit"></a>
<a class="read"></a>
二，为元素集合的第一个元素添加指定样式
复制代码 代码示例:
/* 为样式为list的table标签下的第一个tr标签,添加下面的
css样式 */
table.list tr:first-child {
background-color: #5c87b2;
color: #fff;
font-weight: bold;
}
html调用代码
复制代码 代码示例:
<table class="list">
<tr>
<td>编号</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
