yNxNME
A Pen by Scott Zirkel on CodePen.
<div class="container"> | |
<p>You can divide with any text you like.</p> | |
<p>For instance this...</p> | |
<hr class="hr-text" data-content="AND"> | |
<p>...this...</p> | |
<hr class="hr-text" data-content="OR"> | |
<p>...even this!</p> | |
</div> |
body { | |
text-align: center; | |
background: #fcfcfa; | |
color: #818078; | |
font-family: Futura, sans-serif; | |
} | |
.container { | |
max-width: 50%; | |
margin: 40px auto; | |
} | |
.hr-text { | |
line-height: 1em; | |
position: relative; | |
outline: 0; | |
border: 0; | |
color: black; | |
text-align: center; | |
height: 1.5em; | |
opacity: .5; | |
&:before { | |
content: ''; | |
background: #818078; | |
position: absolute; | |
left: 0; | |
top: 50%; | |
width: 100%; | |
height: 1px; | |
} | |
&:after { | |
content: attr(data-content); | |
position: relative; | |
display: inline-block; | |
color: black; | |
padding: 0 .5em; | |
line-height: 1.5em; | |
// this is really the only tricky part, you need to specify the background color of the container element... | |
color: #818078; | |
background-color: #fcfcfa; | |
} | |
} |
A Pen by Scott Zirkel on CodePen.