Text on left, horizontal line on right

Hi everyone,

The link below shows a CSS technique for a horizontal line with words in the middle.

I’m looking to do something similar but instead of the horizontal line on either side of the words, I need the words to be left aligned then some space and then the horizontal line to be right aligned, like this image:

I just wondered if anyone has any advice on the best way to code this?

Thanks in advance.

Try something like this:

<div>Shop</div>
div {
  margin: 20px;
  overflow :hidden;
  color: gray;
  text-align: left;
  line-height: 1.6em;
}

div:before {
  display: block;
  float: right;
  margin-top: .8em; /* half the line-height */
  border-top: 2px solid silver;
  width: 50%;
  content: "";
}

It should work as your picture, but I’m too lazy to test atm. :slight_smile:

1 Like

Thanks for reply. I tried your code in the context of my bootstrap (below) but it doesn’t seem to work. Instead of div could a wrap “shop” around an h5 and would that work?

<section class="content content-09 hp-shop">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-7">
          <img src="{{ 'images/content/homepage-product-packaging.jpg' | asset_url }}" style="margin-left: -150px;">
      </div>
      <div class="col-12 col-md-5">
        <div class="test">Shop</div>
        <h2>New product:<br>
Second line of heading</h2>
        <p>em ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
        <a class="btn btn-primary" href="#" rel="noopener" title="">Shop Now</a>
      </div>
    </div>
  </div>
</section>
div.test {
  margin: 20px;
  overflow :hidden;
  color: gray;
  text-align: left;
  line-height: 1.6em;
}

div.test:before {
  display: block;
  float: right;
  margin-top: .8em; /* half the line-height */
  border-tp: 2px solid silver;
  width: 50%;
  content: "";
}

Hi,

My code, and yours as posted, will work if you just fix the typo: “border-tp” should be “border-top”.
Sorry. :slight_smile:

I saw it myself yesterday and then edited my post. ^

To be clear I should also have made an “Edit” note. :blush:

That’s great - thanks very much.

1 Like