css3新增伪元素规则

CSS3新增了一些伪元素规则，使得网页设计变得更加丰富多彩，下面便来逐一介绍。

::after {
  content: "";
  display: table;
  clear: both;
}

首先是双冒号after伪元素，用于在某个元素的末端插入一些内容，比如图标、文本等等。在上述代码中，设置了一个空字符串作为内容，将其display属性设置为table，是为了让伪元素成为块级元素，能够占据一整行。而clear属性则是为了清除浮动，避免出现浮动引起的布局问题。

::before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
}

与after伪元素类似，before伪元素用于在某个元素的开始处插入内容。上述代码中，通过attr()函数获取了data-tooltip属性值作为伪元素的内容。将其display属性设置为none，则不会在页面上显示出来。而将伪元素的position属性设置为absolute，则相对于其最近的非static定位的祖先元素进行定位。使用before伪元素和一些js代码的结合，可以实现鼠标悬浮时显示提示内容的效果。

::first-letter {
  font-size: 2em;
  color: red;
}

上述代码展示了:first-letter伪元素的用法，用于设置一个元素的第一个字母的样式。在这里，设置了字体大小为2em、颜色为红色。需要注意的是，:first-letter只能应用于块级元素，而不能应用于行内元素。

::first-line {
  font-weight: bold;
}

与:first-letter相似，:first-line伪元素用于设置一个元素的第一行的样式。上述代码中，设置了字体加粗。需要注意的是，:first-line伪元素常常与:before或:after伪元素结合起来使用，形成一些特殊的效果。

总的来说，CSS3新增的伪元素规则极大地丰富了网页设计的样式设定手段，开发人员可以根据自己的需求进行选择和搭配使用。