JSFiddle - React, Tailwind, and code Playground

HTML

<div><span>some text here</span></div>

<div><span style="width: 100px; display: inline-block;">some text multy line here</span></div>

CSS

body {    
background-color: #EEEEEE;
    background-image: -moz-linear-gradient(45deg,  #DDDDDD 25%, transparent 25%, transparent 75%, #DDDDDD 75%, #DDDDDD),  -moz-linear-gradient(-45deg, #DDDDDD 25%, transparent 25%, transparent  75%, #DDDDDD 75%, #DDDDDD);
    background-size: 60px 60px;
}

div {
    text-align: center;
    overflow: hidden;
    margin: 30px 0;
}

span {
    position: relative;
}

span:before {
    content: '';
    position: absolute;
    border-top: 2px groove;
    left: -990px;
    right: 100%;
    top: 50%;
    margin-right: 10px;   
}

span:after{
    content: '';
    position: absolute;
    border-top: 2px groove;
    left: 100%;
    right: -999px;
    top: 50%;
    margin-left: 10px;
}