JSFiddle - React, Tailwind, and code Playground

by fasilkk

HTML

<div style="text-align:center">

    <h1 style="display: inline-block;"><span >S</span></h1>

</div>


<div style="text-align:center">

    <h1><span >Long text</span></h1>

</div>

CSS

h1 {
	display: inline-block;
  position: relative;
  text-align: center;
}

h1 span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

h1:before {
  background: #ddd;
  content: "";

  height: 1px;
  position: absolute;
    top: 50%;
  width: calc(100% + 50px);
  left: -25px;

}
h1:before {
  left: ;
}