JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<h2 class="decorated"><span>My Title</span></h2>

CSS

/* headlines with lines */
.decorated{
     overflow: hidden;
     text-align: left;
     padding-left: 100px;
 }
.decorated > span{
    position: relative;
    display: inline-block;
}
.decorated > span:before, .decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border: 2px solid;
    width: 591px; /* half of limiter*/
    margin: 0 20px;
}
.decorated > span:before{
    right: 100%;
}
.decorated > span:after{
    left: 100%;
}