下划线与文字颜色不同的居中，带下划线的标题

Question

设置HTML标题的下划线和水平居中样式的最直接方法是什么？我不希望下划线延伸到容器的整个宽度，而只是文字。我还希望下划线与文本颜色不同并且相距一定距离。

此刻，我正在span内使用h2来实现这一目标（在Sass中）：

    h2 {
        text-align: center;
        span {
            border-bottom: 2px solid #e6ebdf;
        }
    }

有没有一种方法，而无需内部span或在父容器中添加样式？这是结果。请注意下划线（a）与文本的颜色不同，以及（b）不像使用text-decoration: underline那样紧贴文本底部：

Answer 1

您可以执行以下操作：-

h2 {
  text-decoration: underline;
  text-align: center;
  text-decoration-color: red;
  text-underline-position: under;
}

<h2>Hello</h2>

浏览器支持可能有限，您可能需要检查。

Answer 2

另一个想法是使用table居中，然后应用渐变，您可以在其中轻松调整大小，位置和颜色：

h2 {
  display:table;
  text-align:center;
  margin:auto;
  padding-bottom:5px; /*control the distance*/
  background:
    linear-gradient(red,red) bottom /80%   2px   no-repeat;
    /*                     position /width height   */
}

<h2>Hello</h2>