02-CSS基础与进阶-day3_2018-08-29-20-20-56-优快云博客

博客包含伪元素选择器相关的两个 HTML 文件，内容转载自 https://www.cnblogs.com/HiJackykun/p/11042325.html ，涉及前端开发中伪元素选择器的知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01伪元素选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 选择第一个字*/
        p::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选择第一行*/
        p::first-line {
            color: blue;
        }
        
        /*选中文字的时候 只能是字体颜色和背景色样式可以设置*/
        p::selection {
            color: pink;
            font-size: 42px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <p>
        freestyle，英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月，因吴亦凡在国产说唱综艺《中国有嘻哈》中屡次提起freestyle而火遍网络。
2017年12月18日，“你有freestyle吗？”入选国家语言资源监测与研究中心发布的2017年度十大网络用语”。
    </p>
</body>
</html>

02伪元素选择器2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*before和after表示在盒子内部前面插入或内部后面插入*/
       div::before {
           content: "俺";
       }
       div::after {
           content: "30出头";
       }
    </style>
</head>
<body>
    <div>今年</div>
</body>
</html>