Horizontal ::after line/bar displaying after paragraph, not header

Question

I created a horizontal line/bar beneath my h1 headers, but on this particular header, it displays the line beneath the header's p subtext instead of directly underneath the header

I tried wrapping the header in a div, but the line still displays beneath the p subtext, not the header

.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://i.stack.imgur.com/Ykk3l.jpg

score 3 · Accepted Answer · answered May 02 '19 at 03:10

The issue is that you have positioned the pseudo element as absolute, and its parent has none.

You're missing this:

.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>

Horizontal ::after line/bar displaying after paragraph, not header

1 Answers1