css - :before pseudo is obscuring text on 2 lines

Question

我有一个 :before 伪，它在部分标题上创建了一个下划线，如下所示:

.c-welcome__title > span:before {
    background: #98b680;
    content: "";
    height: 0.4rem;
    left: 50%;
    position: absolute;
    right: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    top: 3.5rem
    width: 15rem;
}

当我的标题很短时，这很好用，但是当它们很长并且从移动设备上查看时，该行不会位于整个句子的下方，而是出现在中间。

image of the underline

HTML:

<h1 class="c-welcome__title">
  <span>Welcome to Sarahs store&nbsp;Welcome to Sarahs store</span>
</h1>

<p>This is somewhere you can introduce your brand and shout about how awesome your products are.</p>

CSS:

.c-welcome__title {
    position: relative;
    margin-bottom: 0;
}
.c-welcome__title > span {
    display: inline-block;
    padding-bottom: 2.6rem;
}

Answer 1

不要将伪元素设为绝对元素，只需将其设为 display:block 并使用 margin: 0 auto 将其居中。请参阅代码片段。

.c-welcome__title {
    position: relative;
    margin-bottom: 0;
    text-align: center;
}
.c-welcome__title > span {
    display: inline-block;
    padding-bottom: 2.6rem;
}
.c-welcome__title > span::after {
    background: #98b680;
    content: "";
    display: block;
    width: 15rem;
    margin: 10px auto;
    height: 5px;
}

<h1 class="c-welcome__title">
  <span>Welcome to Sarahs store&nbsp;Welcome to Sarahs store</span>
</h1>

<p>This is somewhere you can introduce your brand and shout about how awesome your products are.</p>