水平:::行后/栏后显示在段落之后，而不是标题

Question

我在h1标头下方创建了一条水平线/条，但在此特定标头上，它显示了标头p子文本下方的线，而不是直接在标头下方

我尝试将标头包裹在div中，但该行仍显示在p子文本下方，而不是标头

.header-text {
    font-size: 45px;
    text-align: center;
}

.header-text::after {
    content: '';
    width: 70px;
    height: 2px;
    background: #3FA9F5;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-subtext {
    font-size: 20px;
    text-align: center;
}

<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">

<h1 class="header-text">Header text</h1>

<p class="header-subtext">Testing 123 abc fghijkl.</p>

</div>

https://imgur.com/a/wLZ5uvA

Answer 1

问题是您将伪元素定位为absolute，而其父元素没有。

您错过了此事：

.header-text {
  position: relative;
}

.header-text {
    position: relative;
    font-size: 45px;
    text-align: center;
}

.header-text::after {
    content: '';
    width: 70px;
    height: 2px;
    background: lime;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-subtext {
    font-size: 20px;
    text-align: center;
}

<div>
  <h1 class="header-text">Header text</h1>
  <p class="header-subtext">Testing 123 abc fghijkl.</p>
</div>