创建绝对位置与文本中心不对齐的线

Question

当我使用“文本中心”时，我没有文本，并且行是垂直对齐的。这是js小提琴。 我要这样：

https://jsfiddle.net/dungvd/ey4fj6nv/2/。

test.html：

"<div>Question</div>
<div class="container">
    <div class="row  ">
        <div class="col-sm-6 mx-auto text-center">
                <h2 class="green-line">
                        Welcome to course bs2wp
                </h2>
        </div>
    </div>
</div> "

test.css：

* {
    margin: 0;
    padding: 0;
}

h2.green-line {
    position: relative;
}

h2.green-line:after {
    content: "";position: absolute;
    width: 65px;height: 5px;
    background: green;
    top: 0px;left: 0px;
}

Answer 1

将CSS更改为h2.green-line:after top:50%和transform:translatey(-50%);

 h2.green-line {
    position: relative;
    display:inline;
}

h2.green-line:after {
    content: "";position: absolute;
    width: 65px;height: 5px;
    background: green;
    top: 0;left: 0px;

}

https://jsfiddle.net/lalji1051/80zy4hc6/3/