JSFiddle - React, Tailwind, and code Playground

by Mario Winkler

HTML

<script src="href=&quot;//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css&quot;"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/typeplate/starter-kit/master/css/typeplate.css">
<h1>Articles with graphic separators</h1>

<hr class="sep_img" />

<article class="sep_80percent sep_dots">
    <h1>2 part separator with utf8 chars</h1>
    <p>Bavaria ipsum dolor sit amet Mamalad Broadwurschtbudn Woibbadinga oamoi Enzian Ledahosn großherzig Kuaschwanz, Schdarmbeaga See ebba: Griaß God beinand hob i an Suri Reiwadatschi Fingahaggln Biawambn Radler mechad i hab an Schdeckalfisch.</p>
</article>

<article class="sep_80percent">
    <h1>Centered 90% width separator</h1>
    <p>Eam sei jo leck mi, etza Spotzerl Charivari. Pfenningguat Heimatland Namidog g’hupft wia gsprunga middn de do Stubn. Hogg ma uns zamm Bussal Engelgwand, guad guad.</p>
</article>

<article>
    <h1>simple separator</h1>
    <p>Mei imma heid gfoids ma sagrisch guad amoi nia need Steckerleis! Haferl da eam damischa Bladl, oa Bussal hod i daad boarischer weida! Luja kimmt Radi a liabs Deandl.</p>
</article>

CSS

article:after {
    content:"";
    border-bottom: 2px solid lightsalmon;
    display:block;
    margin: auto;
}

article:last-child:after {
    content: none;
}

.sep_80percent:after{
    width: 80%;
}

.sep_dots:before {
    content: "● ★ ●"; /* utf8 chars as graphic elements */
    color: orangered;
    
    /* force the utf8 symbols to be vertically centered on the bottom-line*/
    line-height: 0px;
    position: absolute;
    bottom: 0;
    
    /* overlay the :after created  border-bottom line */     
    box-shadow: 0 0 0 2px white;
    
    text-align: center;
    
    /* horizontally center the :before box with utf8 symbols */
    width: 3em; 
    margin-left: -1.5em; /* half the width to the left */
    left: 50%;
}

hr.sep_img {
    content: url(http://cliparts.co/cliparts/qTB/XX8/qTBXX8G7c.png);
    width: 60%;
    margin:auto;
    border:0;
    padding:0;
}



h1 {
    font-size: 24px;
}
article {
    margin: 1em;
    position: relative;
}