时间戳

首页 > 解决方案 > 使用纯 css3 在一个圆圈（图标）内打勾/打勾

css - 使用纯 css3 在一个圆圈（图标）内打勾/打勾

问题描述

我正在尝试使用纯 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)

}

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

标签： css

解决方案

您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>

推荐阅读