CKEditor标题下划线：非通栏仅超文本两端及移动端适配问题

你原来用margin-left/right:30%的方式会压缩标题的可用宽度，在移动端容易导致文本换行或布局拥挤，试试这两种更适配的方案：

方案1：用行内元素包裹文本（最简单） #

把标题文本放在<span>里，给span加底部边框和左右内边距，让下划线比文本略长一点，同时保持h2的居中布局，不会影响移动端的宽度：

<h2 style="text-align: center;"><span style="border-bottom: .5px solid red; padding: 0 10px;">AWARDS & RECOGNITION</span></h2>

• 原理：span是行内元素，宽度完全匹配文本内容，padding:0 10px让下划线在文本左右各延伸10px
• 优势：CKEditor里直接编辑即可，无需额外样式，移动端自适应完美

方案2：用伪元素精确控制下划线（更灵活） #

通过h2的伪元素::after来生成下划线，绝对定位后居中，能自定义下划线的宽度，不破坏原标题布局：

<h2 style="text-align: center; position: relative;">AWARDS & RECOGNITION
  <style>
    h2::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 60px); /* 比标题容器窄60px，左右各留30px空白 */
      height: .5px;
      background-color: red;
    }
  </style>
</h2>

• 原理：利用绝对定位和transform: translateX(-50%)让下划线居中，width控制下划线长度，可根据需求调整数值
• 优势：下划线长度和位置更精准，不会影响文本的内边距或换行逻辑

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