hr[data-content]{
  text-align: center;
  padding: 1em;
  position: relative;
  border: 0;
  -webkit-mask: linear-gradient(90deg,transparent, black, transparent);
}
hr[data-content]::before{
  position: absolute;
  content: attr(data-content);
  padding: 0 10px;
  height: 1px;
  line-height:1px;
  border-left: 99vw solid;
  border-right: 99vw solid;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}