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>

 

posted on 2019-06-17 21:37  HiJackykun  阅读(98)  评论(0编辑  收藏  举报