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>

Answer 2

css

   .success-checkmark:after {
      content: '✔';
      position: absolute;
      text-align: center;
      line-height:20px;
      }

垂直调整

 line-height:20px;<--- adjust vertical alignment

.success-checkmark:after {
      content: '✔';
      position: absolute;
      text-align: center;
      line-height:20px;
      
      width: 90px; 
      height: 90px;
      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>

使用纯css3在圆（图标）内打勾/勾号

2 个答案: