CSS 伪元素

CSS 伪元素是用来向页面添加没有实际 HTML 元素的样式。在 CSS 中，伪元素使用单冒号(::)来标识。

常用伪元素

::before

::before 伪元素在指定元素的内容前面添加内容。它通常和 content 属性一起使用。

.selector::before {
  content: "content here";
  /* other styles */
}

::after

::after 伪元素在指定元素的内容后面添加内容。它通常和 content 属性一起使用。

.selector::after {
  content: "content here";
  /* other styles */
}

::first-letter

::first-letter 伪元素用于选择第一个字母或字母组的样式。它只能用于字符元素，如 p、h1 等。

.selector::first-letter {
  /* styles */
}

::first-line

::first-line 伪元素用于选择第一行文本的样式。它只能用于块级元素，如 p、h1 等。

.selector::first-line {
  /* styles */
}

::selection

::selection 伪元素用于选择被用户选中的文本的样式。

::selection {
  /* styles */
}

总结

CSS 伪元素是一种强大的工具，可以让我们更加灵活地控制元素的样式。熟练地掌握伪元素的使用可以让我们在设计上有更多的自由。