伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

    选择符 简介
    ::before 在元素内部的前面插入内容
    ::after 在元素内部的后面插入内容

    注意：

    • before 和 after 创建一个元素，但是属于行内元素
    • 新创建的这个元素再文档树中是找不到的，所以我们称为伪元素
    • 语法：element::before{}
    • before 和 after 必须有content 属性
    • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
    • 伪元素选择器和标签选择器一样，权重为1

    image.png
    实现：

    1.     <style>
    2.         @font-face {
    3.             font-family: 'icomoon';
    4.             src: url('fonts/icomoon.eot?9zr0jd');
    5.             src: url('fonts/icomoon.eot?9zr0jd#iefix') format('embedded-opentype'),
    6.                 url('fonts/icomoon.ttf?9zr0jd') format('truetype'),
    7.                 url('fonts/icomoon.woff?9zr0jd') format('woff'),
    8.                 url('fonts/icomoon.svg?9zr0jd#icomoon') format('svg');
    9.             font-weight: normal;
    10.             font-style: normal;
    11.             font-display: block;
    12.         }
    14.         div {
    15.             position: relative;
    16.             width: 250px;
    17.             height: 50px;
    18.             margin-top: 300px;
    19.             padding-left: 20px;
    20.             text-align: left;
    21.             line-height: 50px;
    22.             font-size: 17px;
    23.             color: #fff;
    24.             background-color: #bfbfbf;
    25.         }
    27.         div::after {
    28.             top: 0;
    29.             right: 20px;
    30.             position: absolute;
    31.             font-family: 'icomoon';
    32.             content: '\e900';
    33.         }
    34.     </style>
    35. </head>
    37. <body>
    38.     <div>手机</div>
    39. </body>