- Autor publikacji
- Virtual Patriot - Administrator
content
- Data publikacji
- Ostatnio edytowano
Przeznaczenie 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 techniczne 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
- wyjątki initial
- animowanie
-
tak (animacja schodkowa)
Interpretacja właściwości content
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 8
-
tak
Zobacz więcej informacji o interpretacji właściwości content.
Opis wartości właściwości content
normal
Wyjaśnienie
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;
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:#7DCDE8;
}
</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
Wyjaśnienie
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;
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
Wyjaśnienie
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';
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:#7DCDE8;
}
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()
Wyjaśnienie
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(https://webkod.pl/files/css/obrazek-01.png);
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 "https://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ść "https://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:#7DCDE8;
}
div::before {
content:url(https://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()
Wyjaśnienie
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);
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:#7DCDE8;
}
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()
Wyjaśnienie
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) ' - ';
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()
Wyjaśnienie
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, '.') ' - ';
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
Wyjaśnienie
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;
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:#7DCDE8;
}
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
Wyjaśnienie
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;
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:#7DCDE8;
}
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
Wyjaśnienie
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;
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:#7DCDE8;
}
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
Wyjaśnienie
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;
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:#7DCDE8;
}
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
Wyjaśnienie
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) ' - ';
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:#7DCDE8;
}
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>