Css3, jak osiągnąc taki efekt?

Hej, wiecie może jak osiągnąc taki efekt?

https://ibb.co/hVLobv

Chciałbym, żeby text był dokładnie pośrodku.

Kombinuje w ten sposób ale nie osiągam zamierzonego efektu bo dysponuje tylko opcją top / bottom

        <span class="first"><hr></span>
        <span class="second">or<hr></span>

.first hr {
  width: 50%;
  border: none;
  border-bottom: 1px dotted red;
  height: 1px;
}

Może pokombinuj z before i after.

::before oraz :;after i na nich border, który napisaleś.