CSS 實現必填項前/后添加紅色*、√、X、▲

1 . * 常規寫法

<label><span style="color:red;">* </span>用戶名 : </label>
<input type="text" value=""/>

1.1 . * CSS寫法(更簡潔方便 , 而且便於統一調整樣式)

<style>
    label.xrequired:before {
        content: '*';
        color: red;
    }
</style>
<label class="xrequired">用戶名 : </label>
<input type="text" value=""/>

2 . √

    .gou{
      display: inline-block;
      transform: rotate(45deg) scale(1);
      width: 5px;
      height: 8px;
      border: 2px solid red;
      border-top: 0;
      border-left: 0;
    }

3 . ×

    .cha {
      width: 20px;
      height: 20px;
      margin: auto;
      position: relative;
    }

    .cha::before,
    .cha::after {
      content: "";
      position: absolute;
      /*方便進行定位*/
      height: 20px;
      width: 1.5px;
      top: 2px;
      right: 9px;
      /*設置top和right使圖像在20*20框中居中*/
      background: #f39800;
    }

    .cha::before {
      transform: rotate(45deg);
      /*進行旋轉*/
    }

    .cha::after {
      transform: rotate(-45deg);
    }

4 . ▲

    .sanjiao {
      width: 0;
      height: 0;
      /* border-color: transparent transparent red; */
      /* 上邊框 左右邊框 下邊框 */
      border-color: rgba(0, 0, 0, 0) transparent red transparent;
      /* 上邊框 右邊框 下邊框 左邊框 */
      border-width: 0 15px 15px;
      border-style: solid;
    }