Tekst pomiędzy liniami <hr>

[azon]

Witam,

Proszę o pomoc w jaki sposób zrealizować aby można było wpisać tekst pomiędzy liniami <hr> lub coś podobnego na wzór tego co przesyłam na załączonym obrazku,

 

 

[Mirex]

Możesz linię ustawić jako tło nagłówka (wystarczy krótki odcinek rozciągnięty przez repeat-x) natomiast tekst obejmij dodatkowo znacznikami <span></span> i nadaj mu padding z tłem zasłaniającym linię. 

[Kamerzysta]

albo w taki sposób:

<div style="width: 200px;  float: left"><hr></div> <div style="width: 300px; float: left; font-size: 30px;">TEKST POMIEDZY LINIAMI</div><div style="width: 200px;  float: left"><hr></div>

 

[WudoKa]

Dnia 2.03.2020 o 16:36, Kamerzysta napisał:

albo w taki sposób:

<div style="width: 200px;  float: left"><hr></div> <div style="width: 300px; float: left; font-size: 30px;">TEKST POMIEDZY LINIAMI</div><div style="width: 200px;  float: left"><hr></div>

 

lepiej nie w taki sposób

[pablop76]

Cytat

Element <hr> reprezentuje zmianę tematu pomiędzy akapitami, np. zmiana sceny w powieści lub przejście do innego tematu w sekcji. W poprzednich wersjach HTML znacznik <hr> reprezentował poziomą linię. Niektóre przeglądarki nadal mogą wyświetlać go jako wypukłą lub wklęsłą linię, jednak ma on ściśle zdefiniowane semantyczne znaczenie i nie służy względom prezentacyjnym.

Rozwiązaniem może być użycie pseudo elementów

<h1 class="divider">Cechy i funkcje</h1>

.divider{
	position: relative;
	text-align: center;
}
.divider:before, 
.divider:after{
	content: "";
  	position: absolute;
  	top: 50%;
	width: 100%;
 	max-width: calc(50% - (260px / 2));
	right: 0;
  	border-bottom: 1px solid #000;
}
.divider:after{
	left: 0;
}