JSFiddle - React, Tailwind, and code Playground

by Angel Ordax

HTML

<!-- CSS horizontal line behind text -->
<!-- Bekerov Artur http://bekerov.ru -->
<!-- Easier than I've seen -->
<div class="head">
     <h3>TEXT pinasi  asd asf af af</h3>
</div>

<!-- SVG -->
<div class="stroke">
     <h3>TEXT</h3>
</div>



<!-- Spotify -->
<div class="medium"> <strong class="line-thru">o</strong> 
</div>


<!-- Pinterest -->
<div class="groupSeparatorWrapper">
    <div class="groupSeparator">
        <p>o</p>
    </div>
</div>

CSS

/* Flexible solution, scalable, adaptable */
.head {
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
    background-repeat: repeat-x;
    background-position: left;
    text-align: center;
}
.head h3 {
    background-color: #ffffff;
    margin: 0 auto;
    padding:0 10px;
    display: inline-block;
    font-size: 66px;
}

/* SVG solution*/
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
    background-repeat: repeat-x;
    background-position: left;
    text-align: center;
}
.stroke h3 {
    background-color: #ffffff;
    margin: 0 auto;
    padding:0 10px;
    display: inline-block;
    font-size: 66px;
}


/* Static solution */
.line-thru {
    display: block;
    font-size: 13px;
    margin-bottom: 1em;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.line-thru:before {
    width: 40px;
    height: 10px;
    background-color: #fff;
    content:'';
    margin: -5px 0 0 -20px;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
}
.line-thru:after {
    border-bottom: 1px solid #000;
    content:'';
    display: block;
    position: absolute;
    top: 49%;
    width: 100%;
    z-index: -2;
}
/* Useless solution */
.groupSeparatorWrapper .groupSeparator,
.groupSeparatorWrapper .groupSeparator {
    content:"";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 40%;
    background: #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
    display: inline-block;
    opacity: 0.58;
}
.groupSeparatorWrapper .groupSeparator p {
    overflow: hidden;
    text-align:...