Horizontal Line in Background using Css3

Question

How to implement this type of style to text using only css3, means a horizontal line in the middle of the tag... Can it be possible using pure css...

Answer 1

You can do it with a 1% gradient like this

.datedAside {
     background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
     background: #FFF;
     padding: 0 0.5rem;
}

You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.