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