CSS快速入门手册

伪元素

预计阅读时间1 分 48 views

1 作用

伪元素允许你在元素的特定部分应用样式，而无需在HTML中添加额外的标记。它们代表元素中不存在的虚拟元素，例如元素的第一个字母、第一行文本或者最后一个子元素。使用伪元素可以实现一些特殊效果，如在文本前添加引号、在段落开头添加特殊符号等。

2 语法

伪元素以双冒号(::)开头，并且通常放在选择器的末尾。常见的伪元素包括：

::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。
::first-line：选中元素的第一行文本。
::first-letter：选中元素的第一个字母。

3 示例

下面是一个简单的HTML示例，展示了如何在元素上应用伪元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pseudo-element Example</title>
    <style>
        /* 在段落前插入内容 */
        p::before {
            content: "开头：";
            font-weight: bold;
        }

        /* 在段落后插入内容 */
        p::after {
            content: " 结尾。";
            font-style: italic;
        }

        /* 选中段落的第一行 */
        p::first-line {
            color: blue;
        }

        /* 选中段落的第一个字母 */
        p::first-letter {
            font-size: 150%;
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个段落，伪元素::before和::after将在其前后插入内容。</p>
</body>
</html>

在这个示例中，我们使用了伪元素来为段落元素应用样式。:before伪元素在段落内容前插入内容，:after伪元素在段落内容后插入内容，:first-line伪元素选中了段落的第一行文本，:first-letter伪元素选中了段落的第一个字母。

伪元素

1 作用

2 语法

3 示例

Leave a Comment 取消回复

伪元素

内容