下划線與文字顏色不同的居中，帶下划線的標題

Question

設置HTML標題的下划線和水平居中樣式的最直接方法是什么？ 我不希望下划線延伸到容器的整個寬度，而只是文字。 我還希望下划線與文本顏色不同，並且相距一定距離。

目前，我正在h2內使用span來實現這一點（在Sass中）：

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

有沒有辦法在沒有內部span或向父容器添加樣式？ 這是結果。 請注意下划線（a）與文本的顏色不同，並且（b）不像使用text-decoration: underline那樣緊緊緊貼文本底部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>