html - 创建左侧带有基于 unicode 的图标的框

Question

我想创建一个 CSS 类，当应用于 div 或 p 元素时，该类会将文本放置在带有基于 unicode 的图标的彩色框中字符在文本左侧垂直居中。这用于创建“待办事项”、“注意”、“警告”类型的标注。

例如，到目前为止我有这个:

.todo {
  background-color: lightyellow;
  float: right;
  border: solid black 1px;
  padding: 10px;
  max-width: 30%;
}

.todo:before {
  content: "\2714";
  font-size: 250%;
}

这个类的用法:

<div class="todo">
This is something that really needs to be done.   
Even if you don't want to still do it.
</div>

给我这样的结果:

我想做的是使复选标记更大(我的 font-size 术语似乎被忽略)并将其垂直居中放置在框中和所有文本的左侧。这可以在不需要样式的情况下完成吗？ div 本身中的其他元素？

Answer 1

好吧，您从 :before 开始，但使用 position 来定义它的位置和对齐方式。

.tick{
  padding-left: 15px;
  position: relative;
}

.tick::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

<p class="tick">To do</p>