伪元素

最新推荐文章于 2025-12-03 23:30:00 发布

原创最新推荐文章于 2025-12-03 23:30:00 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

html学习笔记专栏收录该内容

12 篇文章

订阅专栏

本文深入讲解了CSS伪元素的使用方法，包括:first-letter、:first-line、:selection、:before和:after等特性，展示了如何通过这些伪元素增强网页样式，如改变首字母大小、背景颜色及选中文本的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        /* 
        伪元素，表示页面中一些特殊的并不真实存在的元素 (特殊的位置)
         */
        p{
            color: blue;
        }
        /* 
        第一个字母
         */
         p::first-letter{
             font-size: 40px;
         }

         /* 第一行 */
         p::first-line{
             background-color:yellowgreen;
         }

         /* 选中的内容 */
         p::selection{
             color: red;
         }
         /* ::before 元素的开始
            ::after 元素的结束
                这两个 必须结合content属性来使用 因为正常来说
                之前和之后是没有内容的，那么自然也就没有效果显示出来
          */
        div::before{
            content: '【';
            color: rgb(7, 13, 102);
        }
        div::after{
            content: '】';
            color: rgb(7, 13, 102);
        }
    </style>
</head>
<body>
    <div>这是div 可以用来看before 和after属性的效果</div>
    <p>这里是段落
         <br>莫欺少年穷，终需有日龙穿凤

    </p>
</body>
</html>