如何用CSS制作一個(gè)對(duì)號(hào)？

在CSS中，我們可以使用偽元素和CSS屬性來(lái)制作一個(gè)對(duì)號(hào)，下面是一種實(shí)現(xiàn)方式：

我們需要在HTML中創(chuàng)建一個(gè)包含對(duì)號(hào)的元素，

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

在CSS中定義該元素的樣式：

.check {
  position: relative;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 50%;
}
.check::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: #000;
  transform: translate(-50%, -50%) rotate(45deg);
}

在這個(gè)樣式中，我們使用了偽元素::before來(lái)創(chuàng)建對(duì)號(hào)，我們?cè)O(shè)置了一個(gè)相對(duì)定位的div元素，并給它添加了一個(gè)邊框，我們使用::before偽元素來(lái)創(chuàng)建一個(gè)***定位的對(duì)號(hào)，并將其位置設(shè)置為元素的中心，我們?cè)O(shè)置了對(duì)號(hào)的寬度、高度和背景顏色，并使用transform屬性將其旋轉(zhuǎn)45度，以使其成為一個(gè)對(duì)號(hào)。

當(dāng)我們?cè)贖TML中創(chuàng)建一個(gè)包含對(duì)號(hào)的元素時(shí)，該元素將自動(dòng)應(yīng)用上述樣式，從而生成一個(gè)對(duì)號(hào)。