怎样通过CSS伪元素创建可自适应长度的装饰性破折号？-css教程-PHP中文网

应使用伪元素+repeating-linear-gradient实现无失真破折号线，而非content插入固定字符；通过CSS变量控制颜色粗细间距，用calc或clamp响应式调节密度，并注意留白与对比度以保证视觉节奏。

怎样通过css伪元素创建可自适应长度的装饰性破折号？

为什么不能直接用 `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` 模拟更轻量

如果只是需要「类似破折号的断续下划线效果」，且父元素是内联上下文（如），可用原生文本装饰替代伪元素：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.dash-text {
  text-decoration: underline;
  text-decoration-style: wavy; /* 或 dotted / dashed */
  text-decoration-color: #666;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}