我正試圖用純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)

}

我怎樣才能實現(xiàn)我已經(jīng)用上面的代碼試過了？

可以用內(nèi)容:'?'；只在偽元素上，所以嘗試使用下面的選擇器:

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

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.circle {
  position: relative;
  background: #00B01D;
  border-radius: 100%;
  height: 120px;
  width: 120px;
}

.checkMark {
  position: absolute;
  transform: rotate(50deg) translate(-50%, -50%);
  left: 27%;
  top: 43%;
  height: 60px;
  width: 25px;
  border-bottom: 5px solid #fff;
  border-right: 5px solid #fff;
}

<div class="wrapper">
  <div class="circle">
    <div class="checkMark"></div>
  </div>
</div>

我在網(wǎng)上找到了一個模板，并對其進行了修改。請檢查這是否適合你。

:root {
  --borderWidth: 7px;
  --height: 25px;
  --width: 12px;
  --borderColor: white;
}

body {
  padding: 20px;
  text-align: center;
}

.check {
  display: inline-block;
  transform: rotate(45deg);
  height: var(--height);
  width: var(--width);
  border-bottom: var(--borderWidth) solid var(--borderColor);
  border-right: var(--borderWidth) solid var(--borderColor);
}

.behind {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: black;
}

<div class="behind">
  <div class="check">
  </div>
</div>

.sucess_check-mark {
    position: absolute;
    left: 94px;
    top: 98px;
    height: 22px;
    width: 22px;
    text-align: center;
    border: 2px solid rgb(59 177 165);
    border-radius: 50%;
}

.check-mark {
    display: inline-block;
    transform: rotate(45deg);
    height: 20px;
    width: 7px;
    position: relative;
    top: -6px;
    left: 4px;
    border-bottom: 3px solid rgb(59 177 165);
    border-right: 3px solid rgb(59 177 165);
}

<div class="sucess_check-mark">
  <div class="check-mark"></div>
</div>

鋼性鑄鐵

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

垂直調(diào)整

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>