Jump to content

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.


  #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;

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.