Image next to header - better way?

[MarcusAdamski]

Hi there,
I’m looking to have stylized headers. Say H1 with image to the right, H2 centralized, with an image either side. Please see attached image.

I’ve done this using Flexbox and it works nicely, but it’s a bit clumsy. Is there a different approach, like using the “before” / “after” pseudo elements?

My attempt:
Html

  <div class="header__right-pulse">
  	<h2>HEADER H2 LONG</h2>  
    <div></div>
  </div>
            
  <div class="header__center-pulse">
  	<div></div>
    <h2>HEADER H2</h2>  
    <div></div>
  </div>      

CSS:

.header__right-pulse{
   display: flex;
}
.header__right-pulse div:last-child{
   flex: 1;
   margin-left: 2rem;
   background: url(/images/home/pulse-line-right.png) no-repeat bottom 15px right -50px;
}

.header__center-pulse{
   display: flex;
}
.header__center-pulse div:first-child{
   flex: 1;
   margin-right: 2rem;
   background: url(/images/home/pulse-line-right.png) no-repeat bottom 15px left 0px;
}
.header__center-pulse div:last-child{
   flex: 1;
   margin-left: 2rem;
   background: url(/images/home/pulse-line-right.png) no-repeat bottom 15px right -50px;
}
@media (max-width: 767px){
   .header__right-pulse div:last-child{
      background-position: bottom 15px right -120px;
    }      
   .header__center-pulse div:last-child{
      background-position: bottom 15px right -120px;
    }
}

Thanking-you
Marcus

[Erik_J]

@MarcusAdamski

I’ve done this using Flexbox and it works nicely, but it’s a bit clumsy. Is there a different approach, like using the “before” / “after” pseudo elements?

Hi, Welcome to the forums!

Yes, and you’ve practically answered already.

Just remove the empty divs and use the appropriate pseudo element and the display will be the same:

.header__right-pulse::after{
    display: block;
    ...

.header__center-pulse::before{
    display: block;
    ...

.header__center-pulse::after{
    display: block;
    ...

Edit)
The pseudo element is default an inline element.
To safely work like the divs did, they should have a block display. (Added now)

[MarcusAdamski]

Thanks Erik, I had problems getting the pseudo elements to work, as I’m not use to them. For example, the following attempt didn’t work:

<h2 class="header__right-pulse">HEADER H2 LONG</h2>  

.header__right-pulse::after{
   content:'';
   display:block;
   background: url(/images/home/pulse-line-right.png) no-repeat bottom 15px right -50px;
}

Could you please guide me?

Many thanks
Marcus

[Erik_J]

@MarcusAdamski

the following attempt didn’t work:

Shouldn’t it use flex-box?

[PaulOB]

@messageadamssitepoin

but it’s a bit clumsy. Is there a different approach, l

You can lose all the divs and do this instead.

I just used background colours but replace with your images as required.

[MarcusAdamski]

Apologies, I though the pseudo approach was replacing Flexbox.

My original Flexbox solution makes sense to me, but I don’t understand how to combine it with the pseudo elements.

[PaulOB]

@MarcusAdamski

but I don’t understand how to combine it with the pseudo elements.

You’d give them the same styles as your original divs and then they’d behave like the divs

See my codepen for a shorter example but the method is the same.

[MarcusAdamski]

Ah - thanks Paul / Erik - I understand now, sorry for my slowness.

I’ll experiment with this further, but this looks much more concise than my original solution.

Thanks for your patience
Marcus