html - 使用CSS添加带复选标记的填充圆

Question

我想在 li 元素之前添加带复选标记的填充圆。但是不知道该怎么做。谁知道然后告诉我。

<ul class="my-work" style = "list-style-type: none;">
  <li>Sheets that stay securely in place</li>
  <li>Boxer elastic corner construction</li>
  <li>Unique corner stitching creates snug fit</li>
  <li>Self adjusts to fit mattresses from 7”-18” deep</li>
</ul>

请检查附件img

如果有人有想法，请告诉我。

Answer 1

您可以根据自己的喜好为带有复选标记的字体使用不同的字体系列。

.circle-checkmark {
  font-family: sans-serif;
  background: lightblue;
  color: white;
  padding: 1px 4px;
  border-radius: 50%;
}

ul {
  list-style-type: none;
}

li {
  margin: 4px 0;
}

li::before {
  font-family: sans-serif;
  content: "✔";
  color: white;
  display: inline-block;
  width: 1em;
  background: lightblue;
  padding-left: 3px;
  border-radius: 50%;
  margin-right: 1em;
}

<h2>Regular checkmark</h2>
<span class="circle-checkmark">✓</span>
<h2>Heavy checkmark</h2>
<span class="circle-checkmark">✔</span>

<h2>Something like this can also work</h2>
<ul>
  <li>first</li>
  <li>second</li>
</ul>

另一种选择是使用图像和 list-style-image: url(/path/image.png);