:before和:after伪元素的妙用

主要作用

在元素内容前后加上指定内容。比如在元素前后加小icon。

用法1

<p>你好</p>
p:before{
   content: 'Hello';
   color: red;
}
p:after{
    content: 'Tom';
    color: red;
}

用法2：写三角形

<div class="demo">这是一个测试</div>
.demo:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}