skeleton text

by Soviut

HTML

<h2>Small</h2>

<div class="small">
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
</div>

<h2>Regular</h2>

<div class="regular">
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
</div>

<h2>Large</h2>

<div class="large">
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
  <div class="p">&nbsp;</div>
</div>

CSS

.small {
  font-size: 0.5rem;
}

.regular {
  font-size: 1rem;
}

.large {
  font-size: 1.5rem;
}


.p {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5em;
  
  background: #CCC;
  border-radius: 9999px;
}

.p:last-child {
  width: 75%;
}