Dacă este necesar să se afişeze un text care să aibă, stânga-dreapta, linie orizontală se poate realiza, printre alte variante, cu folosirea unui stil aplicat unui text, dar a altui stil asupra elementului span al acelui text, după cum se poate vedea în acest exemplu, unde se remarcă linia roşie care este dintr-un capăt în altul a paragrafului, dar span-ul are fundalul alb, ceea ce-l face să acopere linia orizontală de sub el:
Exemplu 1
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.line_under_txt { width: 100%; text-align: center; border-bottom: 3px solid red; line-height: 10%; margin: 20px 0 20px 0; font-size:46px; } .line_under_txt span { background:white; color:black; padding:0 10px; } |
HTML
|
1 2 3 |
<h1 class="line_under_txt"> <span class="#">Text simplu</span> </h1> |
Rezultat
Text simplu
Dat fiind faptul că, după cum se vede în exemplu, elementul span se supraprune cu clasa H1, există riscul ca WordPress-ul să-l elimine, dacă veţi face comutarea între modurile de editare Text-Visual. Sugestie de „păcălire” a WordPress-ului: forţarea unei introduceri de aparente clase (span class=”#”) şi nu doar span.
Pornind de la acest exemplu simplu, se poate modela uşor, realizând o astfel de variaţie:
Exemplu 2
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.line_sub_txt { width:100%; text-align:center; overflow: inherit; margin:0px 0px; height:80px; background-image: linear-gradient(#263473,#1076bb,#25a8e0, #f59322,#bdd230); background-color: #263473; /* alternativa IE */ border-radius:25px; } .line_sub_txt span { background:#fff; padding:0 20px 0px 20px; position: relative; top: 18px; font-size: 42px; color:#263473; border-radius:20px; } |
HTML
|
1 2 3 |
<h1 class="line_sub_txt"> <span style="font-family: 'Joti One', cursive;">Text</span> </h1> |
