JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<!-- Crossed line thingy -->
<hr class="style-seven">

CSS

body {
   padding: 50px;    
}

hr {
   margin: 50px 0;   
}

hr.style-seven {
    height: 30px;
    position: relative;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
}

hr.style-seven:before {
    border-bottom: 1px solid #000;
    content: "";
    display: block;
    height: 20px;
    left: 49%;
    position: absolute;
    transform:rotate(140deg);
    -ms-transform:rotate(140deg);
    -moz-transform:rotate(140deg);
    -webkit-transform:rotate(140deg);
    -o-transform:rotate(140deg);
    top: -3px;
    width: 20px;
}

hr.style-seven:after {
    border-bottom: 1px solid #000;
    content: "";
    display: block;
    height: 20px;
    left: 51%;
    position: absolute;
    transform:rotate(140deg);
    -ms-transform:rotate(140deg);
    -moz-transform:rotate(140deg);
    -webkit-transform:rotate(140deg);
    -o-transform:rotate(140deg);
    top: -3px;
    width: 20px;
}