如何为CSS实现的选中态圆形颜色项添加勾选标记

现有基础代码 #

原有组件实现了圆形颜色选择列表，选中项会携带active类名，需要为选中项添加勾选标识
原有CSS：

.showcase-components-colorlist color {
  border: 2px solid transparent;
  margin: 1px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
}

原有HTML结构：

<div class="showcase-components-colorlist color active">
  <svg width="40" height="40">
    <circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
  </svg>
</div>
<div class="showcase-components-colorlist color">
  <svg width="40" height="40">
    <circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
  </svg>
</div>

注：原CSS选择器存在写法错误，.showcase-components-colorlist和color是同一元素上的两个并列类，中间不能加空格，否则会匹配为后代元素，需要先修正这个问题。

实现代码 #

不需要修改现有HTML结构，直接通过CSS伪元素绘制对号即可，完整CSS如下：

/* 修正选择器 + 新增定位基础配置 */
.showcase-components-colorlist.color {
  position: relative; /* 作为伪元素的定位父容器 */
  display: inline-block; /* 修复行内元素定位偏移问题 */
  border: 2px solid transparent;
  margin: 1px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
}

/* 选中态可选：增加外边框高亮，强化选中效果 */
.showcase-components-colorlist.color.active {
  border-color: #222;
}

/* 用::after伪元素绘制白色对号 */
.showcase-components-colorlist.color.active::after {
  content: "";
  position: absolute;
  /* 居中定位 */
  left: 50%;
  top: 50%;
  /* 对号尺寸 */
  width: 7px;
  height: 13px;
  /* 通过边框绘制对号的两个边 */
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  /* 旋转45度变成对号，微调位置保证视觉居中 */
  transform: translate(-50%, -60%) rotate(45deg);
  /* 可选：加阴影适配浅底色选项，保证对号在任何颜色上都清晰可见 */
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.4));
}

可调参数说明 #

• 调整width/height的值可以修改对号的整体大小
• 调整border-width的值可以修改对号线条的粗细
• 修改border的颜色值可以更换对号颜色
• 如果不需要外边框高亮，删除.showcase-components-colorlist.color.active下的border-color配置即可

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