Adding an underline to a heading

HTML & CSS
1

Hi there,

I am trying to create the following effect:

image

This is what I have, but I can’t get the yellow underline effect to show.

Can anyone see what I have done wrong?

CSS:

.slide h1{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 48px;
    line-height: 50px;
    color: #fff;
    position: relative;
    z-index: 20
}

.slide h1 span::after{
    content: "";
    height: 20px;
    background: #ffd54e;
    position: relative;
    z-index: 10;
    width: 100%;
}

HTML:
<h1><span>Help Shape </span>The New Local Community Website!</h1>

I’ve also tried using the ::before pseudo but no luck.

1 Like
2

Something like this? https://codepen.io/ryanreese09/pen/mdrJZgY

Another option would be to use a linear gradient. You can remove the pseudo element and just do something like…

.slide h1 span {
  background: linear-gradient(to top, #ff0 0%, #ff0 100%) no-repeat bottom left / 100% 20px;
}
5 Likes
3

Thank you so much :slight_smile:

Yes I have gone with the linear gradient background which seems a lot simpler and does the job :slight_smile:

Thanks again!

1 Like
4

I’ll try answer that.

The default display for a pseudo element is inline, so the width will not apply. Also, it’s content is inserted after the text and would expand the span.

If the after element had an inline-block display, the 100% width would equal to the nearest parent that has a formatting context, here the H1.

So also the span would need a inline-block display to set a new formatting context.

So far answering the specific question. :slightly_smiling_face:

To really solve the problem with the pseudo element, you need to follow the method @RyanReese already posted.

4 Likes
5

Hi @Erik_J,

Thank you for explaining, I really appreciate it.

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.