<div class="container">
<div class="row row--stars">
<p class="cell">
<span class="underline underline--stars">Starderline</span>
</p>
</div>
<div class="row row--emoji">
<p class="cell">
<span class="underline underline--emoji">Emojerline</span>
</p>
</div>
<div class="row row--bacon">
<p class="cell">
<span class="underline underline--bacon">Baconderline</span>
</p>
</div>
</div>
a {
color: #000;
text-decoration: none;
}
.underline {
background-repeat: repeat-x;
}
.underline--stars {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg");
background-position: 0 1.06em;
background-size: 10px 9px;
color: #f2f3f8;
}
.underline--emoji {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/heart.png");
background-position: 0 1.06em;
background-size: 15px 9px;
color: #e8665f;
}
.underline--bacon {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
background-position: 0 1.06em;
background-size: 28px 9px;
color: #9e4446;
}
// ----- Unrelated ----- //
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 1;
}
p {
margin: 0;
}
.cell {
margin-left: auto;
margin-right: auto;
max-width: 600px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
> * {
display: flex;
flex-basis: percentage(1 / 3);
align-items: center;
align-content: center;
}
}
.row {
padding: 40px;
}
.row--bacon {
background-color: #feeee5;
}
.row--emoji {
background-color: #9c2b38;
}
.row--stars {
background-color: #0d0921;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.