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

An alternative with flex and ::before and ::after. With this solution, you don't need to use a background for the content.

With this HTML markup :

4 weeks ago

And this CSS :

.datedAside {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  align-items: center;
}

.datedAside span {
  padding: 1em;

}

.datedAside::before, 
.datedAside::after {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  content: " ";
  height: 0px;
  border-bottom: 1px solid black;
}