Menu
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.
428
Step 2: Now, place the cursor at the point where we want to add the line in the Html document. And, then we have to use the <hr> tag of Html at that point. Step 3: Now, we have to add the attributes of <hr> tag, which define the size, color and width of a line.
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
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
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
