html - Add a long black line at the end of a header tag -

i'm trying add black line after header tag in html using css :after pseudo class. here code:

.container {    max-width: 700px;    margin: 0 auto;    padding: 10px;    letter-spacing: 0.07em;    line-height: 1.5em;    font-size: 130%;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  h1:after {    display: inline-block;    content: "";    height: 2px;    background: black;    width: 200px;    margin-left: 5px;    margin-top: 8px;  }

<div class="container">    <h1>lorem ipsum</h1>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! ab, laborum.</p>    <p>dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! cupiditate.</p>  </div>

codepen: http://codepen.io/angelangelesiii/pen/yxwpjb

i want long black line span entire width left header itself.

note: don't want try spanning line 100% putting header in front of white background. it's illusion not answer i'm trying find. , as possible, no js solutions i'm keeping simple can be.

use position: absolute; , width:100% give desired output.

check following.

.container {    max-width: 700px;    margin: 0 auto;    padding: 10px;    letter-spacing: 0.07em;    line-height: 1.5em;    font-size: 130%;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }    h1::after {      background: none repeat scroll 0 0 black;      content: "";      display: inline-block;      height: 2px;      margin-left: 5px;      margin-top: 8px;      position: absolute;      top: 0.5em;      width: 100%;  }  h1 {      overflow: hidden;      position: relative;  }

<div class="container">    <h1>lorem ipsum</h1>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! ab, laborum.</p>    <p>dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! cupiditate.</p>  </div>

hope helps.