Linia pozioma po prawej i lewej stronie napisu

Question

Cześć,

Jaki jest najprostszy Waszym zdaniem sposób na dodanie linii poziomej po lewej i prawej stronie wyśrodkowanego zapisu, umieszczonej na połowie jego wysokości, sięgającej do brzegów diva? Coś takiego jak poniżej (tylko mi chodzi o linię ciągłą a nie kreskowaną):

 

---------------------------------------------- KOSZYK -----------------------------------------

Answer 1

Proponuje użycie <hr> z content: attr()

więcej przykładów: on-line (+ linear-gradient)

<hr data-text="koszyk">

hr {
  overflow: visible;
  padding: 0;
  text-align: center;
  border: none;
  border-top: 2px solid black;
}
hr:after {
  content: attr(data-text);
  display: inline-block;
  position: relative;
  top: -0.5em;
  font: 400 1.1em/1 system-ui;
  text-transform: uppercase;
  padding: 0 1em;
  background-color: white;
}

 

Comments

Extra! Dziękuję!

Answer 2

No Panie kolego pierwszy wynik w googlach:

https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle

https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-horizontal-rule