css伪类:before及:after除了插入文字内容还能做点儿啥？画图

全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/11181416.html

1、什么时候用伪类:before和:after？

结合实际开发情况，说一点自己的理解~

（1）原本这两个伪类核心是content，用于在指定元素之前或之后插入内容，但实际开发中用的比较多的是传空字符串""，再做样式控制。

（2）用户操作促使样式改变我们通常是采用添加类/删除类、类名切换等方法控制，但这种情况是针对已存在某dom元素，我们去控制该dom元素的样式显示。

（3）对于需要新增一个只包含样式的dom（无数据交互，也不需要通过js操作该dom）且原本不存在的情况，我们可以采用伪类实现，常用于绘图。

例如：用户点击按钮后我们需要在按钮中绘制一个点，这种情况我们就可以采用伪类，这样可以简化页面dom树结构，仅通过样式进行控制。

2、如何通过伪类进行绘图？以微信聊天框样式绘制为例：

HTML代码如下：可见原本一个聊天框需要3个div dom元素（一个背景框、小尖和小尖边框）才能实现，通过伪类1个便搞定~

<div class="main">
    <div class="test-div">今天中午吃啥？</div>
    <div class="test-div2">吃饭</div>
</div>

CSS代码如下：

        .main{
            height: 300px;
            padding: 50px;
            background-color: #FFCD80;
        }
        .test-div{
            line-height: 36px;
            text-align: center;
            margin-left: 20px;
            position: relative;
            width: 150px;
            height: 36px;
            border-radius: 5px;
            border: 1px solid #7f7f7f;
            background: #f0f0f0;
          }
          .test-div:before, .test-div:after{
            content: "";
            position: absolute;
            border: 6px solid transparent;
            top: 12px;
          }
          .test-div:before{
            left: -11px;
            border-right-color: #f0f0f0;
            z-index: 1;
          }
          .test-div:after{
            left: -12px;
            border-right-color: #7f7f7f;
            z-index: 0;
          }

          .test-div2{
            line-height: 36px;
            text-align: center;
            margin-top: 20px;
            margin-left: 20px;
            position: relative;
            width: 150px;
            height: 36px;
            border-radius: 5px;
            border: 1px solid #7f7f7f;
            background: #f0f0f0;
          }

          .test-div2:before, .test-div2:after{
            content: "";
            position: absolute;
            border: 6px solid transparent;
            top: 12px;
          }
          .test-div2:before{
            right: -11px;
            border-left-color: #f0f0f0;
            z-index: 1;
          }
          .test-div2:after{
            right: -12px;
            border-left-color: #7f7f7f;
            z-index: 0;
          }                    

原理说明：

（1）小尖的实现：利用对长宽为0的块级元素的border属性画三角形，border-left及border-right颜色设置决定了小尖的朝向；

（2）小尖边框的实现：利用:before和:after伪类画两个大小相同的三角形，但相对位置左右偏移差1px，并且白色的三角形覆盖黑色的三角形，黑色三角形自然成了白色三角形的边框；