Piotr Nalepa

Dzisiejszy wpis będzie krótki, a będzie dotyczył sposobu na wstawienie poziomej linii pod nagłówkiem. Taki efekt często można spotkać w różnego typu gazetach, jako ozdobnik.

Struktura HTML

Na nagłówek będą się składały 2 elementy, znaczniki: <h1> oraz <span>.

Kod wygląda następująco:

1

<h1><span>Jakiś nagłówek</span></h1>

Kod CSS odpowiedzialny za magię

Powyższą strukturę trzeba odpowiednio ostylować za pomocą języka CSS.
Kod wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

h1 {
    border-bottom: 1px solid #000;/*pozioma linia do która znajdzie się pod tekstem nagłówka*/
    color: #000;
    font-size: 18px;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
}
h1 span {
    background: #fff;/*tło dla naszego napisu w nagłówku, który przykryje poziomą linię*/
    padding: 0 15px;
    position: relative;
    top: 10px;/*ten kod odpowiada za podniesienie poziomej linii na odpowiednią wysokość nagłówka*/
}

Podsumowanie

Powyższy kod działa we wszystkich przeglądarkach od IE6 do IE9, Firefox, Google Chrome, Safari, Opera.

Jest to na pewno ciekawa technika i zapewnia odpowiedni efekt widoczny wszędzie gdzie jest obsługiwany CSS. Można go wykorzystywać w nagłówkach stron, które mają być stylizowane na staromodne gazety.

Demo z tego artykułu jest widoczne tutaj: CSS pozioma kreska w nagłówku