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.
This question is related to
css
You could achieve this with an extra <span>
:
HTML
<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>
CSS
h2 {
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;
}
http://jsfiddle.net/myajouri/pkm5r/
Another solution without the extra <span>
but requires an overflow: hidden
on the <h2>
:
h2 {
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;
}
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
h2 {_x000D_
background-color: #ffffff;_x000D_
margin-top: -22px;_x000D_
width: 25%;_x000D_
}_x000D_
_x000D_
hr {_x000D_
border: 1px solid #e9a216;_x000D_
}
_x000D_
<br>_x000D_
_x000D_
<hr>_x000D_
<h2>ABOUT US</h2>
_x000D_
Here is how I do this: http://jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;} .title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
Here is another, in my opinion even simpler solution using a flex wrapper:
HTML:
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
CSS:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
I am not experienced at all so feel free to correct things. However, I tried all these answers, but always had a problem in some screen. So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
using flexbox:
h2 {
display: flex;
align-items: center;
}
h2 span {
content:"";
flex: 1 1 auto;
border-top: 1px solid #000;
}
html:
<h2>Title <span></span></h2>
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
h2 {_x000D_
display: flex;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
h2::after {_x000D_
content: '';_x000D_
flex: 1;_x000D_
margin-left: 1rem;_x000D_
height: 1px;_x000D_
background-color: #000;_x000D_
}
_x000D_
<h2>Heading</h2>
_x000D_
Source: Stackoverflow.com