html - 文本下方居中对齐线

Question

我的 h2 元素下面有一行。

它是左对齐的，但我想将它居中对齐到正下方的文本。

有人可以帮助解决这个问题吗？

演示:https://jsfiddle.net/4es6ugjn/

h2 {
  display:block
}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    margin-top: 10px;
    width: 50px;
}

<h2 class="text-center">Welcome to our Website</h2>

Answer 1

试试这个

h2 {
    display: inline-block;
    position:relative;
}
h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position:absolute;
}