如何使用CSS单div结合伪元素创建带背景色的加号图标

需求说明 #

需要仅用CSS绘制加号图标，目标效果如下：

实现约束 #

• 仅使用单个div标签
• 必须使用::before/::after伪元素实现
• 禁止直接使用键盘输入的+字符作为实现基础

实现代码 #

HTML结构 #

只需要单个空div即可，不需要任何子元素或文本内容：

<div class="plus-icon"></div>

CSS样式 #

核心思路是让父div作为定位容器，用两个伪元素分别绘制加号的横、竖两条线，通过定位和偏移让两条线居中交叉：

.plus-icon {
  /* 作为伪元素的定位参照物，可根据需求调整整体图标尺寸 */
  position: relative;
  width: 48px;
  height: 48px;
}

/* 绘制横向线段 */
.plus-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  /* 线条粗细，可按需调整 */
  height: 6px;
  /* 图标颜色，可按需修改 */
  background-color: #2563eb;
  /* 不需要圆角效果直接删除下面这行即可 */
  border-radius: 3px;
}

/* 绘制纵向线段 */
.plus-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  /* 和横向线段保持相同粗细即可 */
  width: 6px;
  background-color: #2563eb;
  /* 不需要圆角效果直接删除下面这行即可 */
  border-radius: 3px;
}

你可以根据实际设计场景，自行修改图标尺寸、线条粗细、颜色、圆角参数适配需求。

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