Autor publikacji
Virtual Patriot - Administrator

Dodatkowy element HTML

Data publikacji
Ostatnio edytowano

W tej części kursu CSS przyjrzymy się właściwości content, która służy do dodania dodatkowej zawartości do elementu HTML.

Poniżej został umieszczony przykładowy dokument HTML. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        background-color:gold;
        padding:15px;
        text-align:center;
        font-size:21px;
        border:3px solid black;
      }
    </style>
  </head>

  <body>

    <div>to jest przykładowy element - div</div>

  </body>
</html>

Po wyświetleniu naszego dokumentu HTML, w oknie naszej przeglądarki internetowej, zobaczymy po prostu przykładowy element div.

to jest przykładowy element - div

Aby dodać dodatkową zawartość do elementu HTML, należy wykorzystać do tego celu selektor :before lub selektor :after. Zawartość tą należy podać jako wartość właściwości content.

Zobaczmy co się stanie, gdy do naszego dokumentu HTML dodamy następujące reguły CSS: 

div:before {
  content:'Ten tekst będzie dodany przed zawartością elementu - div - ';
  color:red;
}

div:after {
  content:' - Ten tekst będzie dodany po elemencie - div';
  color:red;
}

Rezultat:

to jest przykładowy element - div

Do naszego przykładowego elementu div została dodana dodatkowa zawartość przed (before) oraz po (after) jego domyślnej zawartości. Zawartość ta jest koloru czerwonego, ponieważ w regule CSS użyliśmy właściwości color wraz z wartością red, dzięki czemu tekst dodatkowej zawartości jest koloru czerwonego.

Dodatkowa zawartość jest przeznaczona tylko do wyświetlenia (nie jest ona tak naprawdę dodawana do elementów HTML, które znajdują się w części body dokumentu HTML), dlatego nie możesz jej zaznaczyć kursorem myszki (oczywiście nie należy tego sposobu traktować jako zabezpieczenie przed kopiowanej treści).

Dodatkowa zawartość jest traktowana przez przeglądarkę internetową jako dodatkowy element HTML wyświetlony w linii, dlatego w regułach CSS, w których użyliśmy selektor :before oraz :after, możemy kontrolować wygląd danej dodatkowej zawartości, możemy określać dla niej właściwości CSS takie same jak dla zwykłego elementu HTML. Ponadto dodatkowa zawartość dziedziczy właściwości CSS (te, które mogą być dziedziczone) od elementu HTML, do którego została dodana.

Zobaczmy jak będzie wyglądać nasza dodatkowa zawartość, gdy określimy dla niej dodatkowe właściwości CSS: 

div:before {
  content:'Ten tekst będzie dodany przed zawartością elementu - div - ';
  color:red;
  display:block;
  padding:15px;
  width:200px;
  margin-bottom:15px;
  border:3px solid red;
  background-color:black;
}

div:after {
  content:' - Ten tekst będzie dodany po elemencie - div';
  color:red;
  display:block;
  padding:15px;
  width:300px;
  margin-top:15px;
  border:3px solid red;
  background-color:white;
}

Rezultat:

to jest przykładowy element - div

Od tej pory nasza dodatkowa zawartość jest traktowana przez przeglądarkę internetową jako blokowy element HTML (display:block;), który posiada w sobie różne inne właściwości CSS, które określiliśmy w regule CSS, która została utworzona za pomocą selektora :before oraz :after.

Wiedza o dodatkowej zawartości, która jest dodawana za pomocą selektora :before lub selektora :after oraz właściwości content, przyda nam się w następnej części kursu CSS, w której zapoznamy się ze sposobem tworzenia układu blokowych elementów HTML, które będą wyświetlone jeden obok drugiego.