伪元素之::before和::after的content几种取值详解| Note:这些特殊字符的html，js和css的

在元素前面放字体图标:string-字体图标

代码

    <style>
        p::before {
          content: '\2708';
          border: 1px solid #000;
          background-color: red;
          padding: 6px;
        }
    </style>
    <body>
        <p title="航班号码9527">航班号码9527</p>
    </body>

效果 | Note:这些特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。。

在元素前面放字体图标:string-文字

代码

    <style>
        p::before {
            content: '<<';
        }
        p::after {
            content: '>>';
        }
    </style>
    <body>
        <p title="航班号码9527">航班号码9527</p>
    </body>

效果

元素前面放置标签内部的数据(attr)

代码

    <style>
        p::before {
            content: attr(title)';';
        }
    </style>
    <body>
        <p title="航班号码9527">航班号码9527</p>
    </body>

效果

元素前面放置图片

代码

    <style>
        p::before {
            content: url('https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/favicons/favicon.ico~tplv-t2oaga2asx-image.image');
        }
    <style>
    <body>
        <p title="航班号码9527">航班号码9527</p>
    </body>

效果

元素自定义序号

代码| 参考

    <style>
        header {
          /* 设置一个名为'first-level'的计数器，其初始值为0 */
          counter-reset: first-level 0;
        }

        header h1 {
          /* 设置一个名为'second-level'的计数器，其初始值为0 */
          counter-reset: second-level 0;
        }

        header h1:before {
          /* 将节'first-level'计数器的值增加1 */
          counter-increment: first-level 1;
          content: counter(first-level) ".";
        }

        header h2:before {
          /* 将节'second-level'计数器的值增加1 */
          counter-increment: second-level 1;
          content: counter(first-level) "."counter(second-level) ".";
        }
    </style>
    <body>
      <header>
        <h1>第一章</h1>
        <h2>第一章第一小节</h2>
        <h2>第一章第二小节</h2>
        <h2>第一章第三小节</h2>
    
        <h1>第二章</h1>
        <h2>第二章第一小节</h2>
        <h2>第二章第二小节</h2>
    
        <h1>第三章</h1>
        <h2>第三章第一小节</h2>
        <h2>第三章第二小节</h2>
      </header>
    </body>

效果