在网页开发中，经常会遇到需要展示加号图标的场景，例如展开折叠面板、添加按钮或者表单增项操作。如果不想额外加载图片或图标字体，完全可以依靠纯CSS配合伪元素来实现一个简洁的加号效果。这种方式不仅减少了资源请求，还能通过修改颜色、尺寸等属性灵活适配各种设计需求。
实现原理解析
加号本质上是由一条水平线和一条垂直线交叉组成的。我们可以准备一个作为容器的块级元素，例如一个<span>或者<div>，设定其宽高作为加号的整体占位。接着使用::before伪元素生成水平线条，使用::after伪元素生成垂直线条，通过绝对定位让两者中心重合，就得到了加号形状。
这种方案的关键在于容器的position需要设置为relative，而两个伪元素设置为absolute并居中。伪元素的背景色就是加号的线条颜色，其宽度和高度则分别控制横竖线条的长短与粗细。由于伪元素不属于文档实际节点，不会影响HTML语义结构，非常适合做纯装饰性的图形。
基础代码示例
下面是一个最简单直观的实现，我们创建一个类名为css-plus的容器，通过两个伪元素画出加号：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.css-plus {
position: relative;
width: 24px;
height: 24px;
display: inline-block;
}
.css-plus::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 100%;
background: #333;
transform: translateX(-50%);
}
.css-plus::after {
content: '';
position: absolute;
top: 50%;
left: 0;
height: 2px;
width: 100%;
background: #333;
transform: translateY(-50%);
}
</style>
</head>
<body>
<span class="css-plus"></span>
</body>
</html>
在上面的代码中，::before被设定为宽度2px、高度占满容器的竖线，并通过translateX(-50%)实现水平居中；::after则是高度2px、宽度占满容器的横线，通过translateY(-50%)实现垂直居中。两者叠加后自然形成加号。
常见调整与优化
实际项目中，加号往往需要根据主题变色或随屏幕缩放。由于线条颜色由伪元素的background控制，直接修改该值即可换色；若希望加号随父级字体大小变化，可将容器宽高改为使用em单位，例如width:1em、height:1em，线条粗细用0.1em表示，这样在父级设置font-size时加号会同步伸缩。
另外一个容易忽略的点是点击区域。如果加号用于按钮内部，建议将容器尺寸留足，避免伪元素线条太细导致用户难以点中。可以保持视觉线条细，但容器实际占位稍大，再利用伪元素定位居中即可兼顾美观与体验。
使用CSS渐变实现另一种思路
除了伪元素，还可以利用background的线性渐变在一个元素上直接绘制加号，适合不允许新增伪元素场景：
.plus-gradient {
width: 24px;
height: 24px;
background:
linear-gradient(#333, #333) center / 2px 100% no-repeat,
linear-gradient(#333, #333) center / 100% 2px no-repeat;
}
这段CSS通过两层渐变分别画出竖线和横线，并用background-size限定其粗细与长度，同样能得出加号。不过伪元素方案在兼容性和语义上都更直观，也更方便做悬停旋转等交互动画。
小结
纯CSS实现加号效果的核心就是横竖两条线的叠加，无论是伪元素还是渐变背景都能胜任。开发者可以根据项目结构选择最合适的方式，在保持页面轻量的同时，获得高度可定制的UI元素。
pure_CSSplus_iconCSS_pseudo_element修改时间：2026-08-09 06:51:21