:before content(在之前追加文字)

最新推荐文章于 2025-04-10 15:31:14 发布

原创最新推荐文章于 2025-04-10 15:31:14 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

杂记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用CSS的伪元素及content属性为HTML元素添加额外的内容。通过实例演示了如何在段落前添加文本，展示了这一技巧的具体应用。

1.内容生成
通过CSS属性向HTML文本片段追加新元素
1.伪元素
:before :after
2.内容生成属性 --- content
content
取值：文本，字符串，图像，url(函数),计数器

-------------------------------------------案例

<head>
    <meta charset="UTF-8">
    <title>内容添加</title>
    <style>
        p{
            color: red;  //果然content添加内容,放在了p元素李
        }
        p:before{
            content: "你说:";  /*在标签前面添加内容,看控制台,添加内容好像在P元素里了*/
        }
    </style>
</head>
<body>
    <p>
        我是小火柴的理想
    </p>
</body>