Line-On-Sides Headers with Flexbox and minimal lines
/*
* Source: http://codepen.io/anon/pen/ZQLrQm
*/
h2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: rebeccapurple;
text-align: center;
}
h2:before, h2:after {
-webkit-box-flex: 1;
-webkit-flex: 1 0 20%;
-ms-flex: 1 0 20%;
flex: 1 0 20%;
height: 3px;
content: '';
background-color: currentColor;
}
h2::before {
margin-right: 10px;
}
h2::after {
margin-left: 10px;
}
h2.left-aligned {
text-align: left;
}
h2.left-aligned::before {
-webkit-box-flex: 0;
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
margin-right: 0;
}
h2.right-aligned {
text-align: left;
}
h2.right-aligned::after {
-webkit-box-flex: 0;
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
margin-left: 0;
}
body {
padding: 15px;
}
<!-- Source: http://codepen.io/anon/pen/ZQLrQm -->
<h2>This is a heading that is so long, it might as well break.</h2>
<h2 class="left-aligned">This is a heading that is so long, it might as well break.</h2>
<h2 class="right-aligned">This is a heading that is so long, it might as well break.</h2>
/*
* Source: http://codepen.io/anon/pen/ZQLrQm
*/
h2 {
display:flex;
align-items: center;
color: rebeccapurple;
text-align:center;
&:before, &:after {
flex: 1 0 20%;
height: 3px;
content: '';
background-color: currentColor;
}
&::before {
margin-right:10px;
}
&::after {
margin-left:10px;
}
&.left-aligned {
text-align:left;
}
&.left-aligned::before {
flex:0;
margin-right: 0;
}
&.right-aligned {
text-align:left;
}
&.right-aligned::after {
flex:0;
margin-left: 0;
}
}
body {
padding: 15px;
}