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>

：before伪指令使2行文字模糊不清

1 个答案: