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:;

          }

          .test-div:after{

            left: -12px;

            border-right-color: #7f7f7f;

            z-index:;

          }

          .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:;

          }

          .test-div2:after{

            right: -12px;

            border-left-color: #7f7f7f;

            z-index:;

          }

原理说明：

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

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

巴特西

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

最新文章

热门文章