chevron-left chevron-right

[CSS]Jak zrobić nagłówek z poziomą kreską w środku?

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

  • Piotr Nalepa

    Tak, kod się pojawił w tym artykule. Chciałem się tym podzielić na moim blogu. W tamtym artykule można było go przeoczyć.
    Jednakże, tą metodę stosowałem wcześniej. Zanim się pojawiła się w tamtym wpisie.

  • We wpisie zalinkowanym przez @Mestiso widnieje info „No extra HTML”, który ma się nijak do tego bo jednak jest extra element zwany dalej span’em 😛

  • Piotr Nalepa

    A jakie to ma odniesienie do tego artykułu?

  • Pedro

    Korzystając z CSS 3 można obyć się bez dodatkowego spana i skorzystać z pseudoklas :before i :after dla znacznika h1.

  • Piotr Nalepa

    chętnie poznam konkretny przykład 🙂