Home/ Questions/Q 6934073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:54:49+00:00

I’m trying to create some text headings that have a line out to the

  • 0

I’m trying to create some text headings that have a line out to the side that is dynamic based on the width of the text.

Example:
enter image description here

I’m guessing I’ll need to do some sort of background color on the heading (white, for instance) to sort of fake it, and then use a :before pseudo class, but so far I haven’t been able to pull it off.

The HTML (at least at the moment) is just a basic heading tag:

<h3>This is some text</h3>

I’d really like to avoid adding additional HTML elements, if possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve come across this website with a few good examples. There is an example using the before pseudo class, but it does have an additional <span> element. Nevertheless, it is a good place to start. This one could possibly work for you (it does however contain an additional element):

    CSS:

    <style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  body { font-family: "Helvetica", sans-serif; text-align: center; background: transparent; padding: 10px 40px;}

  p {
    text-align: left;
    margin-bottom: 30px;
    line-height: 20px;
  }

  h1 {
    text-align:left;
    position: relative;
    margin-top: 10px;
    margin-left: 0;
  }

  h1.two span {
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 10;
  }

  h1.two+p {
    border-top: solid 1px black;
    padding-top: 40px;
    margin-top: -40px;
  }

</style>

    Main body:

    <body>
  <h1 class="two"><span>Heading Number Two</span></h1>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>

    Appears to work in Safari. Please check the link, there are more examples.

    • 0