Create line after text with css

Question

Im trying to make a line after each of my h2 tags. I can´t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.

I use the :after method to create lines

       h2:after {        position: absolute;        content: "";        height: 2px;        background-color: #242424;        width: 50%;        margin-left: 15px;        top: 50%;        }  

Check code here: http://jsfiddle.net/s9gHf/ As you can see the line get too wide, and make the website too wide.

Answer 1

You could achieve this with an extra <span>:

h2 {   font-size: 1rem;   position: relative; }  h2 span {   background-color: white;   padding-right: 10px; }  h2:after {   content: "";   position: absolute;   bottom: 0;   left: 0;   right: 0;   height: 0.5em;   border-top: 1px solid black;   z-index: -1; }

<h2><span>Featured products</span></h2> <h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>

Another solution without the extra <span> but requires an overflow: hidden on the <h2>:

h2 {   font-size: 1rem;   overflow: hidden; }  h2:after {   content: "";   display: inline-block;   height: 0.5em;   vertical-align: bottom;   width: 100%;   margin-right: -100%;   margin-left: 10px;   border-top: 1px solid black; }

<h2><span>Featured products</span></h2> <h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>

External examples: First, Second