如何仅用HTML和CSS实现标题下方装饰线？尝试后效果未达预期

我之前做项目的时候折腾过好几种不同风格的标题装饰线，给你分享几个实用方案，应该能解决你的问题——先看看这几个常见的样式：

1. 跟随标题宽度的短下划线 #

这种线条不会撑满整个容器，只跟标题文字的宽度匹配，适合简约的排版：

<h2 class="title-short-line">我的自定义标题</h2>

.title-short-line {
  position: relative;
  display: inline-block; /* 让容器宽度跟随文字内容 */
  margin-bottom: 20px;
}
.title-short-line::after {
  content: '';
  position: absolute;
  bottom: -6px; /* 调整线条和文字的间距 */
  left: 0;
  width: 50%; /* 自定义线条长度 */
  height: 3px;
  background-color: #2d3748; /* 自定义颜色 */
  border-radius: 2px; /* 可选：圆角线条 */
}

2. 撑满容器的渐变装饰线 #

如果想要更活泼的视觉效果，渐变线条是不错的选择：

<h2 class="title-gradient-line">渐变风格标题</h2>

.title-gradient-line {
  position: relative;
  padding-bottom: 10px;
}
.title-gradient-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3182ce, #9f7aea, #e53e3e); /* 自定义渐变颜色 */
}

3. 带装饰圆点的对称线条 #

这种样式适合复古或优雅的排版，视觉平衡感很强：

<h2 class="title-dot-line"><span>带圆点装饰的标题</span></h2>

.title-dot-line {
  position: relative;
  text-align: center; /* 居中排版更美观 */
}
.title-dot-line::before,
.title-dot-line::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35%; /* 左右线条的长度 */
  height: 1px;
  background-color: #cbd5e0;
}
.title-dot-line::before {
  left: 0;
}
.title-dot-line::after {
  right: 0;
}
.title-dot-line span {
  display: inline-block;
  padding: 0 18px;
  position: relative;
  z-index: 1; /* 确保文字在线条上方 */
}
.title-dot-line span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e53e3e; /* 圆点颜色 */
  z-index: -1; /* 让圆点在文字下方 */
}

你之前效果不达预期？可能是这几个坑： #

• 忘记给标题元素加 position: relative：伪元素的定位是基于父元素的，没有这个属性的话，线条会跑到页面角落
• 混淆了 inline-block 和 block：如果想要线条跟随文字宽度，一定要用 inline-block；如果要撑满容器就用默认的 block
• z-index 层级问题：如果线条盖过了文字，记得给文字容器加 z-index: 1 把它提上来

如果你有具体的样式参考（比如线条的形状、位置、特殊装饰），可以再细化描述，调整代码就能实现啦！

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