CSS3伪元素是一种特殊的类，用于选择并样式化文档中某些部分的元素，而无需在HTML代码中添加额外的标记。它们主要用于装饰和对现有内容进行样式设置。以下是一些常用的CSS3伪元素及其用法：
::before：在选定元素的内容之前插入内容。selector::before {
content: "插入的内容";
/* 其他样式 */
}
::after：在选定元素的内容之后插入内容。selector::after {
content: "插入的内容";
/* 其他样式 */
}
::first-letter：选择选定元素的第一个字母，并为其应用样式。selector::first-letter {
font-size: 24px;
color: red;
/* 其他样式 */
}
::first-line：选择选定元素的第一行文本，并为其应用样式。selector::first-line {
font-size: 18px;
font-weight: bold;
/* 其他样式 */
}
::selection：选择用户选定的文本，并为其应用样式。selector::selection {
background-color: yellow;
color: black;
/* 其他样式 */
}
请注意，伪元素的选择器语法是在伪元素名称前加上两个冒号（::），但在某些情况下，一个冒号（:）也可以正常工作，例如在旧版浏览器中。
以下是一个使用::before伪元素的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Pseudo-elements Example</title>
<style>
p::before {
content: "注意：";
color: red;
}
</style>
</head>
<body>
<p>这是一个使用CSS3伪元素的示例。</p>
</body>
</html>
在这个示例中，我们在<p>元素的内容之前添加了红色的"注意："文本。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
