:before pseudo 模糊了 2 行的文本

:before pseudo is obscuring text on 2 lines

我有一个 :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;
}

不要将伪元素设为绝对元素,只需将其设为 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>