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，並且白色的三角形覆蓋黑色的三角形，黑色三角形自然成了白色三角形的邊框；