时间戳

首页 > 解决方案 > 水平 ::after line/bar 在段落之后显示，而不是标题

html - 水平 ::after line/bar 在段落之后显示，而不是标题

问题描述

我在标题下方创建了一条水平线/条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

标签： htmlcss

解决方案

问题是您已将伪元素定位为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>

推荐阅读