如何缩短text-decoration-line的宽度？基于Bootstrap 3的实现方法

嘿，这个需求我之前在做Bootstrap 3项目的时候也碰到过！默认的text-decoration-line确实是贯穿整行的，没法直接控制长度，不过咱们可以用几个变通的方案来实现，完全适配Bootstrap 3的技术栈，给你详细说说：

方案一：用伪元素模拟装饰线（最灵活通用） #

这是最常用的方法，通过:after伪元素替代原生下划线，能精准控制长度、位置和样式：

首先给需要加短装饰线的元素加一个自定义类，比如.short-decoration，然后写CSS：

.short-decoration {
  position: relative;
  display: inline-block; /* 让元素宽度贴合文字内容，避免整行 */
}

.short-decoration:after {
  content: '';
  position: absolute;
  bottom: -2px; /* 调整和文字的间距，适配Bootstrap默认行高 */
  left: 10%; /* 左边留白比例，控制装饰线的起始位置 */
  width: 80%; /* 装饰线的长度，按需调整 */
  height: 1px; /* 线的粗细 */
  background-color: #333; /* 线的颜色，也可以用Bootstrap内置变量比如@gray-dark */
}

用法示例：

<h4 class="short-decoration">这是带短下划线的标题</h4>
<p>我是普通文本，<span class="short-decoration">这段文字有短下划线</span>，剩下的没有。</p>

方案二：利用边框+内联元素（适合对齐场景） #

如果你的文字需要居中对齐，并且想要下划线比文字宽一点但不占满整行，可以用边框实现，结合Bootstrap的文本对齐类更方便：

.short-border-underline {
  border-bottom: 1px solid #333;
  padding-bottom: 2px;
  display: inline-block;
  width: 70%; /* 控制下划线的宽度 */
  text-align: center; /* 文字居中，和下划线对齐 */
}

用法示例：

<div class="text-center">
  <h5 class="short-border-underline">居中的短下划线标题</h5>
</div>

方案三：针对Bootstrap链接的定制处理 #

如果是给Bootstrap的链接做短下划线，我们可以覆盖默认链接样式，同时保持Bootstrap的主题色风格：

a.short-link {
  text-decoration: none; /* 去掉原生下划线 */
  position: relative;
}

a.short-link:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background-color: @link-color; /* 用Bootstrap内置的链接颜色变量 */
}

a.short-link:hover:after {
  background-color: @link-hover-color; /* hover时切换为主题hover色 */
}

如果用的是Bootstrap的纯CSS版本（不是LESS/SASS），直接把变量换成具体颜色值就行，比如#337ab7。

额外注意点 #

• 伪元素方案一定要确保父元素设置了position: relative，不然伪元素会相对于整个页面定位
• 如果需要响应式适配，可以加媒体查询调整比例，比如移动端让下划线更宽：

  @media (max-width: 768px) {
    .short-decoration:after {
      left: 5%;
      width: 90%;
    }
  }
  

• 如果用Bootstrap的LESS/SASS版本，尽量用内置变量，这样后续修改主题色时不用改多处CSS

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