Ostatnio edytowany:

content

Autor: Virtual Patriot

Opis właściwości content

Za pomocą właściwości content możemy określić typ dodatkowej treści, jaka może zostać dodana do zawartości interesującego nas elementu HTML.

Informacje dodatkowe

za pomocą selektora ::before do początkowej zawartości elementu HTML możemy dodać dodatkowy pseudoelement

za pomocą selektora ::after do końcowej zawartości elementu HTML możemy dodać dodatkowy pseudoelement

Dodatkowe techniczne informacje o właściwości content

przeznaczenie

każdy element HTML, do zawartości którego możemy dodać dodatkowy pseudoelement ::before lub ::after

pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

q

animowanie

nie (animacja nieciągła)

Interpretacja właściwości content

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości content

normal

Opis

Wartość normal jest domyślną wartością właściwości content.

Domyślnie zawartość elementu HTML jest pozbawiona jakiejkolwiek dodatkowej treści.

Przykład

  content:normal;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Zawartość przykładowego elementu "div" nie posiada żadnej dodatkowej treści.

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

none

Opis

Za pomocą wartości none właściwości content możemy sprawić, że jakakolwiek dodana już do zawartości interesującego nas elementu HTML dodatkowa treść nie zostanie wyświetlona.

Przykład

  content:none;
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Do początkowej zawartości każdego z przykładowych elementów "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS - ", lecz dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS - " pierwszego z przykładowych elementów "div" nie został wyświetlony, ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością "none".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      figure {
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      div::before {
        content:'KURS CSS - ';
        color:blue;
      }

      div:first-child::before {
        content:none;
      }
    </style>
  </head>

  <body>

    <figure>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>

ciąg znaków

Opis

Za pomocą właściwości content oraz dowolnego wybranego przez nas ciągu znaków możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci wskazanego przez nas ciągu znaków.

Przykład

  content:'KURS CSS';
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS", ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością "KURS CSS".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:'KURS CSS';
        color:blue;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

url()

Opis

Za pomocą właściwości content oraz funkcji url() możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci wskazanego przez nas obrazka.

Przykład

  content:url(http://webkod.pl/files/css/obrazek-01.png);
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci obrazka znajdującego się pod adresem "http://webkod.pl/files/css/obrazek-01.png", ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-01.png".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:url(http://webkod.pl/files/css/obrazek-01.png);
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

attr()

Opis

Za pomocą właściwości content oraz funkcji attr() możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci wartości posiadanej przez wskazany przez nas atrybut HTML.

Przykład

  content:attr(data-item);
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci wartości posiadanej przez atrybut "data-item" przykładowego elementu "div", ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością w postaci funkcji "attr()", w której to funkcji została użyta wartość "data-item".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:attr(data-item);
        color:blue;
      }
    </style>
  </head>

  <body>

    <div data-item="kurs css">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

counter()

Opis

Za pomocą właściwości content oraz funkcji counter() możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci wartości posiadanej przez wskazany przez nas licznik.

Przykład

  content:counter(licznik-1) ' - ';
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Do początkowej zawartości każdego z przykładowych elementów "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci wartości posiadanej przez licznik o nazwie "licznik-1", ponieważ do wspomnianych elementów "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z kombinacją wartości zawierającą między innymi funkcję "counter()", w której to funkcji została użyta wartość "licznik-1".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      figure {
        counter-reset:licznik-1;
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      figure > div::before {
        content:counter(licznik-1) ' - ';
        counter-increment:licznik-1;
        color:blue;
      }
    </style>
  </head>

  <body>

    <figure>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>

counters()

Opis

Za pomocą właściwości content oraz funkcji counters() możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci wartości posiadanej przez wskazany przez nas licznik, jak również w postaci wartości posiadanych przez liczniki o tej samej wskazanej przez nas nazwie.

Przykład

  content:counters(licznik-1, '.') ' - ';
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Do początkowej zawartości każdego z przykładowych elementów "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci wartości posiadanych przez wszystkie dostępne dla poszczególnych przykładowych elementów "div" liczniki o nazwie "licznik-1" (ponadto gdy jest to konieczne wartości posiadane przez kolejne liczniki o nazwie "licznik-1" zostały od siebie odseparowane znakiem "."), ponieważ do wspomnianych elementów "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z kombinacją wartości zawierającą między innymi funkcję "counters()", w której to funkcji zostały użyte następujące wartości: " licznik-1, '.' ".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #struktura {
        counter-reset:licznik-1;
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      #struktura figure {
        counter-reset:licznik-1;
        margin:0;
        padding-left:2em;
      }

      #struktura div::before {
        content:counters(licznik-1, '.') ' - ';
        counter-increment:licznik-1;
        color:blue;
      }
    </style>
  </head>

  <body>

    <figure id="struktura">
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"
        <figure>
          <div>przykładowy element "div"</div>
          <div>przykładowy element "div"</div>
          <div>przykładowy element "div"</div>
        </figure>
      </div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>

open-quote

Opis

Za pomocą wartości open-quote właściwości content możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci dostępnego cudzysłowu otwierającego określonego przez nas za pomocą właściwości quotes.

Przykład

  content:open-quote;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci dostępnego cudzysłowu otwierającego, ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością "open-quote".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        quotes:'›››' '‹‹‹';
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:open-quote;
        color:red;
        background-color:white;
      }

      div::after {
        content:close-quote;
        color:blue;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

close-quote

Opis

Za pomocą wartości close-quote właściwości content możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodana dodatkowa treść w postaci dostępnego cudzysłowu zamykającego określonego przez nas za pomocą właściwości quotes.

Przykład

  content:close-quote;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do końcowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::after" wraz z dodatkową treścią w postaci dostępnego cudzysłowu zamykającego, ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::after") została dodana właściwość "content" wraz z wartością "close-quote".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        quotes:'›››' '‹‹‹';
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:open-quote;
        color:blue;
        background-color:white;
      }

      div::after {
        content:close-quote;
        color:red;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

no-open-quote

Opis

Za pomocą wartości no-open-quote właściwości content możemy sprawić, że do zawartości interesującego nas elementu HTML nie zostanie dodana dodatkowa treść w postaci dostępnego cudzysłowu otwierającego określonego przez nas za pomocą właściwości quotes.

Przykład

  content:no-open-quote;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Mimo że do końcowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::after" wraz z dodatkową treścią w postaci dostępnego cudzysłowu zamykającego, do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" pozbawiony dodatkowej treści w postaci dostępnego cudzysłowu otwierającego, ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z wartością "no-open-quote".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        quotes:'›' '‹' '››' '‹‹';
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:no-open-quote;
      }

      div::after {
        content:close-quote;
        color:blue;
        background-color:white;
      }

      div > span::before {
        content:open-quote;
        color:blue;
        background-color:white;
      }

      div > span::after {
        content:close-quote;
        color:blue;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej
      <span>został umieszczony</span>
      w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

no-close-quote

Opis

Za pomocą wartości no-close-quote właściwości content możemy sprawić, że do zawartości interesującego nas elementu HTML nie zostanie dodana dodatkowa treść w postaci dostępnego cudzysłowu zamykającego określonego przez nas za pomocą właściwości quotes.

Przykład

  content:no-close-quote;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Mimo że do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci dostępnego cudzysłowu otwierającego, do końcowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::after" pozbawiony dodatkowej treści w postaci dostępnego cudzysłowu zamykającego, ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::after") została dodana właściwość "content" wraz z wartością "no-close-quote".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        quotes:'›' '‹' '››' '‹‹';
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:open-quote;
        color:blue;
        background-color:white;
      }

      div::after {
        content:no-close-quote;
      }

      div > span::before {
        content:open-quote;
        color:blue;
        background-color:white;
      }

      div > span::after {
        content:close-quote;
        color:blue;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej
      <span>został umieszczony</span>
      w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

kombinacja wartości

Opis

Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości content możemy sprawić, że do zawartości interesującego nas elementu HTML może zostać dodanych kilka dodatkowych treści różnego typu jednocześnie.

Podana przez nas kombinacja wartości właściwości "content" nie może zawierać wartości normal, none oraz wartości globalnych.

Przykład

  content:' # ' attr(data-item) ' - ';
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do początkowej zawartości przykładowego elementu "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci ciągu znaków " # ", w postaci wartości posiadanej przez atrybut "data-item" przykładowego elementu "div" oraz w postaci ciągu znaków " - ", ponieważ do wspomnianego elementu "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z następującą kombinacją wartości: " ' # ' attr(data-item) ' - ' ".

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:' # ' attr(data-item) ' - ';
        color:blue;
      }
    </style>
  </head>

  <body>

    <div data-item="kurs css">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>