галочка / галочка внутри круга (иконки) с использованием чистого 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>