Skip to content

Instantly share code, notes, and snippets.

@aliasadidev

aliasadidev/index.html

Last active June 24, 2020 18:23
Show Gist options
  • Save aliasadidev/9844dccbe980059c5389786b5d81d2db to your computer and use it in GitHub Desktop.
Save aliasadidev/9844dccbe980059c5389786b5d81d2db to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal line with words in the middle CSS
Raw
index.html
<div class="spliter">
<span class="left-line">
<hr>
</span>
<span class="middle">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium accusamus impedit omnis. Expedita iure voluptatum ut, maxime veritatis est architecto tempora animi similique. Harum perferendis suscipit tempora sint, hic inventore!
</span>
<span class="right-line">
<hr>
</span>
</div>
<div class="spliter">
<span class="left-line">
<hr>
</span>
<span class="middle">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</span>
<span class="right-line">
<hr>
</span>
</div>
Raw
style.css
.left-line {
float: left;
color: black;
background: white;
text-decoration: none;
display: inline-flex;
align-items: center;
min-width: 8%;
flex: 1;
}
.right-line {
color: black;
background: white;
text-decoration: none;
display: inline-flex;
align-items: center;
min-width: 8%;
flex: 1;
}
hr {
display: inline-block;
width: 100%;
}
.middle {
display: block;
background: #FFEB3B;
color: #212529;
font-family: Tahoma, sans-serif;
direction: rtl;
text-align: center;
padding: 10px 10px;
border-radius: 20px;
min-width: 180px;
width: fit-content;
}
.spliter {
display: flex;
}
span {
font-size: 14px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment