: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 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 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 伪,它在章节标题上创建了一个下划线,如下所示:
.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 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 Welcome to Sarahs store</span>
</h1>
<p>This is somewhere you can introduce your brand and shout about how awesome your products are.</p>