如何为HTML十六进制对勾图标添加完美圆形CSS背景

你遇到的椭圆形背景问题，核心原因是CSS伪元素默认属于行内元素，宽高完全由字符本身的固有尺寸决定，而对勾字符的宽高并不相等，哪怕设置border-radius: 50%也无法渲染为正圆。

解决步骤 #

• 给伪元素设置display: inline-block或者flex类布局属性，使其支持自定义宽高
• 设置相等的宽度、高度数值，保证基础形状是正方形，此时设置50%圆角才能得到正圆
• 增加对齐属性，保证对勾字符在圆形背景内居中显示

可用修改代码 #

方案1：用line-height实现居中（兼容性更好）

.tick-icon::after {
  content: '\2713';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: red;
  font-size: 1.5rem; /* 可根据显示效果调整，避免对勾超出圆形范围 */
  color: #ffffff;
  text-align: center;
  line-height: 2rem; /* 和高度值保持一致即可实现垂直居中 */
}

方案2：用flex实现居中（调整更灵活）

.tick-icon::after {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: red;
  font-size: 1.5rem;
  color: #ffffff;
}

内容的提问来源于stack exchange，提问作者User985614