Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Vertically Center Horizontal Line that is Next to Text CSS


Recommended Posts

Using line blocks for this effect is going to be problematic. As you've seen things can move around a bit and as the screen gets narrower the blocks will slide under each other in ways that will ruin the effect.

I suggest losing the hr bocks. Move the title text down into the text block below, putting all the text into one block, and remove the text block where the title was.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  #block-5f5711e4b5e913c476e5 > .sqs-block-content:before,
  #block-3c3e2664ddcb4aaed3eb > .sqs-block-content:before
  
    {
    
      border-top : solid thick #cea02e;
      content : '';
      display : inline-block;
      margin-right : 1em;
      padding-bottom : 0.5em;
      width : 50%;
      
      }
      
  #block-5f5711e4b5e913c476e5 > .sqs-block-content > p:first-child,
  #block-3c3e2664ddcb4aaed3eb > .sqs-block-content > p:first-child
  
    {
    
      display : inline-block;
      
      }
      
  </style>

This is for the first couple of text blocks. You can add more lines for more blocks.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...