JSFiddle - React, Tailwind, and code Playground

by Michal Špaček

HTML

<html>
<body>
<div class="separator">*</div>

<div class="separator">***</div>

<div class="separator"><hr/></div>

<div class="separator">
  <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Typographic_ornament_from_A_Handbook_to_Anarchy.png" alt="ornament"/>
</div>

<div class="separator">
  <table style="margin-left:auto;margin-right:auto;">
    <tr>
      <td>*</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>*</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>*</td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

</body>
</html>

CSS

.separator {
  visibility: hidden;
}
.separator:after {
  display: block;
  text-align: center;
  content: '*';
  visibility: visible;
}