I want to add an underline under my header that trails to the left side of the page. I want the header to be able to line up with the start of the content beneath it but am having difficulty doing the CSS for it. I've tried using hr element, styling a div and grouping the header with it, and other ways, but can't seem to get it to the trail to the edge of the page.

Here is what it currently looks like.

Here is some of the HTML that is rendering it:

 <div >
      <h2 >
          EXPERIENCE
      </h2>
  <div ></div>

Any help is appreciated!

CodePudding user response：

You can try it and set width.

h2:before {
   content: '';
   position: absolute;
   left: -20px;
   bottom: -20px;
   border-bottom: 2px solid #506e73;
   width: 400px;
}

CodePudding user response：

Here is an idea using border-image

.full-line {
  border-image: 
   linear-gradient(0deg,#1095c1 5px,#0000 0) fill 0//0 0 0 100vw;
  padding: 10px 0;
  width: fit-content;
}


section {
  /* center   max-width:800px   min-margin: 10px */
  margin-inline: max(10px, 50% - 800px/2);
  margin-block: 50px; 
}
body {
  font-family: system-ui, sans-serif;
  background: #eee;
}
h1 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
  text-align:justify;
}

<section>
  <h1 >Main title</h1>
  <p>Dragée powder bear claw tiramisu pudding gummi bears wafer. Macaroon chocolate cake cake marzipan icing carrot cake macaroon sweet. Lemon drops </p>
</section>
<section>
  <h2>Secondary title</h2>
  <p >Pie pastry macaroon candy tootsie roll jujubes pudding pie. Jelly-o chocolate cake pastry gingerbread brownie danish liquorice chocolate cake. Jelly beans donut cupcake danish croissant liquorice. Cotton candy brownie croissant pie toffee. Cotton candy chocolate cake gummi bears ice cream jelly fruitcake caramels. Shortbread ice cream bear claw gingerbread chocolate cake jelly-o cake caramels soufflé.</p>
</section>
<section>
  <h3>another title</h3>
  <p>Pie pastry macaroon candy tootsie roll jujubes pudding pie.</p>
</section>