如何实现H2标题后线条始终附着最后单词的响应式适配

要实现橙色线条始终跟随H2标题的最后一个单词——短文本时紧贴单词右侧，长文本换行后也跟着最后一个单词到下一行，核心是把最后一个单词单独用容器包裹，让伪元素相对于这个容器定位，而非整个H2元素。

调整后的代码 #

CSS

h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 67.2px;
  color: #1f1f23;
  text-transform: uppercase;
  width: 100%;
}

/* 包裹最后一个单词的容器 */
h2 .last-word {
  position: relative;
  display: inline;
}

/* 生成右侧线条 */
h2 .last-word:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;
  margin-left: 15px;
  width: 50px;
  height: 24px;
  background-color: #ff3300;
  white-space: nowrap;
}

/* 移动端适配 */
@media (max-width: 768px) {
  h2 {
    font-size: 32px;
    line-height: 40px;
  }
  h2 .last-word:after {
    height: 16px;
    width: 40px;
    margin-left: 10px;
  }
}

HTML

<!-- 短文本场景 -->
<h2>Latest <span class="last-word">Newsy</span></h2>

<!-- 长文本换行场景 -->
<h2>Latest Breaking Global Regional <span class="last-word">Newsy</span></h2>

关键逻辑 #

1. 容器绑定：将最后一个单词放入span.last-word，通过position: relative让伪元素的定位锚点绑定到单词本身，而非整个标题块。
2. 定位控制：伪元素用left: 100%从单词右侧起始，margin-left控制间距，确保线条始终紧贴单词，不受标题整体宽度影响。
3. 响应式适配：媒体查询中调整字体和线条尺寸，保证移动端显示比例协调；去掉H2的inline-block，让标题自然换行，线条随最后一个单词移动到换行后的行。

如果需要线条宽度与单词长度关联，可将width改为calc(60% - 15px)这类动态值，但固定宽度在多数场景下更稳定，避免不同长度单词导致线条尺寸波动。

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