CSS властивість content

Властивість content використовується разом із псевдоелементами ::before та ::after для створення контенту всередині елемента. Має такі значення:

• normal
• none
• counter
• attr
• string
• open-quote
• close-quote
• no-open-quote
• no-close-quote
• url

Властивість content повинна бути використана разом із псевдоелементами ::before та ::after, інакше не буде вставки згенерованого контенту. Контент завжди має бути доданий.

Об'єкти, вставлені за допомогою властивості content, є заміненими анонімними елементами.

Синтаксис

content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;

приклад

html>
html>
head>
title>Заголовок документа title>
style>
p::before
< content: "Name -"; >
.country::before
< content: normal; > style> head>
body>
h2>Приклад властивості content h2>
p>Мене звуть Джон p>
p
class="country">Я живу в Канаді p> body> html>

Приклад зі значенням "string":

приклад

html>
html>
head>
title>Заголовок документа title>
style>
li:before< content:"List item"; >
p:after< content:" with string value."; > style> head>
body>
h2>Приклад властивості content h2>
ul>
li>1 li>
li>2 li>
li>3 li> ul>
p>Якийсь параграф. p> body> html>

Приклад із значенням "open-quote". Значення "open-quote" не можна застосовувати без "close-quote".

приклад

html>
html>
head>
title>Заголовок документа title>
style>
p::before
< content: open-quote; >  p::after
< content: close-quote; > style> head>
body>
h2>Приклад властивості content h2>
p>Привіт мене звати Джон. p>
p>Я з Канади. p> body> html>

Значення

Підтримка браузера

Популярно про псевдоелементи: Before і After

Псевдоелементи :before і :after дозволяють додавати вміст (стилі) до та після елемента, до якого були застосовані.

Усього існує кілька типів псевдоелементів: :first-line, :first-letter, ::selection, :before і :after. У цій статті докладно розглянуто останні два як найбільш корисні.

Синтаксис та підтримка браузерами

Псевдоелементи з'явилися ще CSS1, але пішли в реліз тільки в CSS2.1. На самому початку в синтаксисі використовувалася одна двокрапка, але в CSS3 використовується подвійна двокрапка на відміну від псевдокласів:

Але в будь-якому випадку, сучасні браузери вміють розуміти обидва типи синтаксису псевдоелементів, крім Internet Explorer 8, який сприймає лише одну двокрапку. Тому надійніше використати одне.

Приклад використання псевдоелементів

:before Це основний контент.  :after

Елементи :before і :after нічого очікувати згенеровані, тобто. не буде видно в коді сторінки, тому вони і називаються псевдоелементами.

Використання

Використовувати псевдоелементи дуже просто: :before додається перед потрібним елементом, а :after - Після.
Для додавання контенту всередині псевдоелементів можна скористатися CSS властивістю content.

Простий приклад: необхідно додати лапки для цитати:

blockquote:before < content: open-quote; >blockquote:after

Стилізація псевдоелементів

До псевдоелементів можна застосовувати такі ж стилі, як і до «реальних»: зміна кольору, додавання тла, регулювання розміру шрифту, вирівнювання тексту тощо.

blockquote:before < content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; >blockquote:after

Створені елементи за промовчанням inline-елементи, тому при вказівці висоти чи ширини необхідно встановити display: block:

blockquote:before < content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; border-radius: 25px; /** define it as a block element **/ display: block; height: 25px; width: 25px; >blockquote:after < content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: rightright; position: relative; bottombottom: 40px; border-radius: 25px; /** define it as a block element **/ display: block; height: 25px; width: 25px; >

Також всередині псевдоелемента можна використовувати зображення замість звичайного тексту, і навіть додавати фонове зображення.

blockquote:before < content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top: 30px; border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ddd; display: block; height: 25px; width: 25px; >blockquote:after < content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: rightright; position: relative; bottombottom: 40px; border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ddd; display: block; height: 25px; width: 25px; >

У цьому прикладі властивість вмісту містить порожній рядок, це необхідно, інакше псевдоелемент не буде правильно відображатися.

Використання разом із псевдокласами

Псевдоелементи можуть бути використані разом із псевдокласами, у нашому прикладі це допоможе додати hover-ефект лапкам:

blockquote:hover:after, blockquote:hover:before

Додавання transition-ефекту

Також можна застосувати властивість transition для плавної зміни кольору лапок:

transition: all 350ms; -o-transition: all 350ms; -Moz-transition: all 350ms; -webkit-transition: all 350ms;

На жаль, це нормально працює лише в останніх версіях Firefox.

Подивитись демонстрацію прикладу з цієї статті.

Трохи натхнення

Три приклади використання псевдоелементів :before та :afte:

Посібник із псевдоелементів у CSS

CSS-псевдоелементи дозволяють стилізувати елементи або частини елементів, не додаючи до них ідентифікатори (#id) або класи (.class). Це буде корисно в ситуаціях, коли ви просто хочете стилізувати першу букву абзацу, щоб створити ефект буквиці, або ви хочете вставити деякий контент до або після елемента тощо. буд. лише через таблицю стилів.

CSS3 ввів новий синтаксис подвійних двокрапок ( :: ) для псевдо-елементів, щоб розрізняти їх і псевдокласи. Новий синтаксис псевдоелемента може бути заданий за допомогою:

selector::pseudo-element

Тепер розглянемо найчастіше використовувані псевдоелементи:

Псевдоелемент ::first-line

Псевдоелемент ::first-line застосовує спеціальний стиль до першого рядка тексту.

Правила у наступному прикладі форматують перший рядок тексту в абзаці. Довжина першого рядка залежить від розміру вікна браузера або елемента, що містить його.

Псевдоелемент ::first-letter

Псевдоелемент ::first-letter використовується для додавання спеціального стилю до першої літери першого рядка тексту. Правила в наступному прикладі форматують першу букву абзацу тексту та створюють ефект буквиці.

Псевдоелементи ::before та ::after

Псевдоелементи ::before та ::after можуть бути використані для вставки згенерованого контенту до або після вмісту елемента. CSS-властивість content використовується разом із цими псевдо-елементами для вставки згенерованого контенту.

Це дуже корисно для подальшого прикраси елемента додатковим вмістом, який не повинен бути частиною фактичної розмітки сторінки. Використовуючи ці псевдоелементи, можна вставляти звичайні рядки тексту або вбудовані об'єкти, такі як зображення та інші ресурси.

Псевдоелементи та CSS-класи

Зазвичай нам потрібно стилізувати лише певний абзац тексту чи інші блокові елементи із цими псевдоелементами. Ось тут і вступає в гру оголошення класу із псевдоелементом. Псевдоелементи можуть бути об'єднані із класами CSS для створення потрібного ефекту.

Правила в наступному прикладі відображатимуть першу літеру всіх абзаців із class="article" зеленим кольором та розміром xx-large .

p.article::first-letter