css - 使用纯 css3 在圆圈(图标)内打勾/打勾

Question

我正在尝试使用纯 css3 在其中绘制一个带有刻度/复选标记的圆

.success-checkmark {
    content: '✔';
    position: absolute;
    left:0; top: 2px;
    width: 17px; height: 17px;
    border: 1px solid #aaa;
    background: #f8f8f8;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)

}

我怎样才能实现我已经尝试过上面的代码？

Answer 1

您只能在伪元素上使用 content: '✔';，因此请尝试使用以下选择器:

    .success-checkmark:after {
      content: '✔';
      position: absolute;
      left:0; top: 2px;
      width: 20px; 
      height: 20px;
      text-align: center;
      border: 1px solid #aaa;
      background: #f8f8f8;
      border-radius: 50%;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
    }

<div class="success-checkmark"></div>