JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<h1><span>0123456789</span></h1>
<h1><span>span</span></h1>
<h1><span>abcdefghij</span></h1>
<h1><span>ABCDEFGHIJ</span></h1>
<h1><span>abcdefghij</span></h1>

CSS

body {
  box-sizing:border-box;
  margin:0;
  padding:1em;
  background:linear-gradient(to left, white 50%, rgba(0,0,0,0.2) 50%);
}
h1 { 
  text-align:center;
  overflow:hidden;
  position:relative;
}
h1 span {
  display:inline-block;
  margin-left:-1em;/* ratrapage des white spaces induit par les pseudo-element;*/
  overflow:hidden;
}
h1 span:before,
h1 span:after {
  content:'';
  height:1em;
  display:inline-block;
  width:100%;
  position:absolute;
}
h1 span:before {
  margin-right:-100%;
  border-bottom:solid 1px;
  color:red;
  vertical-align:bottom;
  margin-top:0.2em;/* Ă  regler selon */
}
h1 span:after {
  margin-left:-100%;
  vertical-align:top;
  border-top:solid 1px;
  color:red;
}
h1:nth-child(odd) {
  color:gray;
}
h1:last-of-type{
  font-variant:small-caps;
  color:lime;
  text-shadow:0 0 black;
}