CSS 伪元素

CSS 伪元素是CSS中的一种特殊的选择器，用于在特定选择器中创建虚拟的元素，这些元素在DOM结构中是不存在的。伪元素通常用于在HTML元素的指定位置添加一些特殊效果，例如在元素的前后添加符号、图标等。下面将详细介绍CSS 伪元素的使用方式及常用属性。

伪元素的语法

CSS中伪元素的表达式为::伪元素名称，其中::表示伪元素选择器。伪元素可以与CSS选择器结合使用，例如p::before、p::after。

伪元素::before能够在指定元素的前面创建新的虚拟元素。可以使用content属性来设置新增的元素的文本内容，默认为“none”。

p::before {
  content: "标题：";
}

伪元素::after能够在指定元素的后面创建新的虚拟元素。可以使用content属性来设置新增的元素的文本内容，默认为“none”。

p::after {
  content: "*";
}

伪元素::first-letter能够选择元素的第一个字母并对其应用样式。可以使用font-size、font-family、color等属性来设置首字母的样式。

p::first-letter {
  font-size: 26px;
  color: red;
  font-weight: bold;
}

伪元素::first-line能够选择元素的第一行并对其应用样式，但必须注意的是，::first-line只能在块级元素中使用。可以使用font-size、font-family、color等属性来设置第一行的样式。

p::first-line {
  font-size: 22px;
  color: blue;
  text-transform: uppercase;
}

content属性用于定义伪元素的内容。可以输入文本、表情或者是一个计数器。

p::before {
  content: "技术：";
}

display属性用于设置伪元素的生成方式。默认生成方式是inline，此时伪元素跟文本行内排版，其高度和宽度完全由padding和border决定。另外，还有block、table-cell等生成方式可以使用。

p::before {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background-color: #f00;
}

position属性用于定义伪元素的定位方式。默认为static，不会被定位，无法附加元素。

p::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

z-index属性用于定义伪元素的层叠顺序。可以通过设置层叠顺序值来调整伪元素与普通元素之间的层叠效果。

p::before {
  content: "伪元素";
  position: absolute;
  z-index: -1;
}

CSS伪元素是一种非常常用的选择器，可以用于在HTML元素的前后添加符号、图标、文字等内容，从而改变页面的样式。必须注意的是，不同的伪元素有不同的用途和限制，正确使用可以提高页面的可读性和美观度。