JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<h1><span>Text</span></h1>

<h1><span>Lengthy Text</span></h1>

<h1><span>Very Lengthy Text</span></h1>

<h1><span class="small">Smaller Font</span></h1>

CSS

body {
    background: tomato; /* or whatever */
}
h1{
    text-align: center;
    overflow: hidden;
}

span {
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
span:before, span:after {
    content: '';
    display: block;
    width: 1000px;
    position: absolute;
    top: 0.73em;
    border-top: 1px dotted black;
}
span:before {
    right: 100%;
}
span:after {
    left: 100%;
}
.small {
    font-size: 10px;
}