css 标题下划线不用 border 怎么实现_通过 after 伪元素绘制下划线-css教程-PHP中文网

::after伪元素画下划线比border-bottom更灵活，因其不撑开行高、可精准控制长度与位置；需设position:relative和content:""，用width:fit-content或max-content匹配文字宽度，避免错位。

css 标题下划线不用 border 怎么实现_通过 after 伪元素绘制下划线

用 `::after` 伪元素画下划线比 `border-bottom` 更灵活

直接用 border-bottom 给标题加下划线，会撑开行高、影响垂直居中，还很难控制长度（比如只下划到文字末尾，不延伸到容器右边界）。::after 伪元素能精准定位、独立控制宽高颜色，且不参与文档流，是更干净的解法。

`::after` 下划线的基本结构和关键样式

核心思路：给标题设 position: relative，再用 ::after 在其底部绝对定位画一条横线。必须显式设置 content: ""，否则伪元素不渲染。

.title {
  position: relative;
  display: inline-block; /* 确保宽度包裹文字，避免下划线过长 */
}
.title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* 调整下划线离文字底部的距离 */
  width: 100%;
  height: 2px;
  background-color: #333;
}

display: inline-block 很关键——让 width: 100% 指向文字实际宽度，不是父容器宽度
bottom: -4px 是常见起始值，具体数值需根据字体大小和行高微调
不用 border 或 box-shadow，纯靠 height + background-color 控制粗细和颜色

让下划线只覆盖文字区域（不拉满）的两种可靠方式

默认 width: 100% 是对齐容器的，要“缩进”或“精确贴合”，得换策略：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

用 width: fit-content（现代浏览器支持好，但 IE 完全不支持）
更兼容的做法：用 left 和 right 同时设为 0，再配合 transform: scaleX(0.8) 缩放，或直接用 width: calc(100% - 16px) 手动减去左右留白
如果标题是单行且内容固定，最稳的是用 width: max-content + margin: 0 auto 居中伪元素

.title {
  position: relative;
  display: inline-block;
}
.title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: max-content; /* 严格匹配文字宽度 */
  height: 2px;
  background-color: #333;
  margin: 0 auto;
}