应使用伪元素+repeating-linear-gradient实现无失真破折号线，而非content插入固定字符；通过CSS变量控制颜色粗细间距，用calc或clamp响应式调节密度，并注意留白与对比度以保证视觉节奏。
为什么不能直接用 content: "—" 拉伸破折号
破折号（en dash、em dash）是固定宽度字符，content 插入后无法通过 width 或 font-size 均匀拉伸——放大只会让字符变粗、模糊或出现锯齿，且两端无法对齐容器边界。真实需求其实是「视觉上像一条带破折号纹理的横线」，而非纯文本符号拉伸。
::before + repeating-linear-gradient 实现无失真装饰线
用伪元素绘制背景，靠 CSS 渐变重复渲染破折号纹理，避免字符缩放问题，同时天然支持响应式宽度：
.decorative-dash {
position: relative;
height: 2px;
margin: 24px 0;
}
.decorative-dash::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: repeating-linear-gradient(
90deg,
#666,
#666 8px,
transparent 8px,
transparent 16px
);
}- 8px 实线 + 8px 空隙 = 16px 一个完整破折号单元，可按需调整比例
- 颜色、粗细、间距全部用 CSS 变量控制，例如：
--dash-color、--dash-unit - IE 不支持
repeating-linear-gradient，若需兼容，降级为单次linear-gradient+background-size平铺
用 text-decoration + text-underline-offset 模拟更轻量
如果只是需要「类似破折号的断续下划线效果」，且父元素是内联上下文（如 <span></span>），可用原生文本装饰替代伪元素：
.dash-text {
text-decoration: underline;
text-decoration-style: wavy; /* 或 dotted / dashed */
text-decoration-color: #666;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}- 不新增 DOM 节点，性能开销更低
-
text-decoration-style: dashed在 Safari 15.4+ 和 Chrome 95+ 才真正支持自定义 dash/gap 长度；旧版会退化为浏览器默认虚线 - 无法精确控制起始/结束位置，不适合做块级分隔线
响应式断点下保持破折号密度一致的关键
当容器宽度变化时，渐变纹理可能在窄屏下显得过密、宽屏下过疏。解决办法不是写媒体查询，而是用逻辑单位锚定密度：
立即学习“前端免费学习笔记（深入）”；
- 把
background-size设为calc(1rem * 2)，依赖字体大小缩放，而非固定像素 - 用
clamp(8px, 4vw, 16px)控制单个破折号单元宽度，兼顾小屏紧凑与大屏清晰 - 避免使用
%值设置渐变色标位置——百分比基于背景区域，而该区域受background-size影响，易造成计算偏差
最常被忽略的是：破折号不是装饰终点，而是视觉节奏的一部分。留白、对齐、色彩明度必须和相邻内容形成明确对比，否则再“自适应”的线也会被当成噪音过滤掉。
