::before — CSS — Дока
- Кратко
- Пример
- Как пишется
- Как это понять
- Подсказки
- На практике
- Денис Ежков советует
Кратко
Секция статьи «Кратко»Когда мы в CSS добавляем
Пример
Секция статьи «Пример»a::before { content: "♥";}
a::before {
content: "♥";
}
Как пишется
Секция статьи «Как пишется»::before { /* Для CSS 3 */}:before { /* Для CSS 2 */}
::before {
/* Для CSS 3 */
}
:before {
/* Для CSS 2 */
}
💡 В CSS 3 версии ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.
Как это понять
Секция статьи «Как это понять»Проще всего воспринимать псевдоэлемент
Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое перед текстом, либо выступая в роли дополнительного стилизованного блока.
По умолчанию псевдоэлемент
Самый простой пример использования
<div> <p>Внимание! Этот абзац является важным предупреждением!</p></div><div> <p>Этот абзац является информационным.</p></div>
<div>
<p>Внимание! Этот абзац является важным предупреждением!</p>
</div>
<div>
<p>Этот абзац является информационным.
</p>
</div>
</p>
</div>
.warning::before { content: "⚠"; margin-right: 0.5em;}
.warning::before {
content: "⚠";
margin-right: 0.5em;
}
Открыть демо в новой вкладкеПодсказки
Секция статьи «Подсказки»💡 Не забывайте прописывать свойство content для псевдоэлемента
💡 Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.
На практике
Секция статьи «На практике»Денис Ежков советует
Секция статьи «Денис Ежков советует» 🛠 Псевдоэлемент::before <ul> <li>Сделать настоящее тату</li> <li>Посмотреть «Звездные войны»</li> <li>Научиться играть на укулеле</li> <li>Не бриться полгода</li> <li>Поучаствовать в чайной церемонии</li></ul>
<ul>
<li>Сделать настоящее тату</li>
<li>Посмотреть «Звездные войны»</li>
<li>Научиться играть на укулеле</li>
<li>Не бриться полгода</li>
<li>Поучаствовать в чайной церемонии</li>
</ul>
li::before { content: "💜"; margin-right: 5px;}
li::before {
content: "💜";
margin-right: 5px;
}
Открыть демо в новой вкладке🛠 Пример с пустым свойством content:
<ul> <li>Милый маленький грибочек</li> <li>Сколопендровый листочек</li> <li>Жёлтой пыльки чуть</li></ul>
<ul>
<li>Милый маленький грибочек</li>
<li>Сколопендровый листочек</li>
<li>Жёлтой пыльки чуть</li>
</ul>
li { position: relative; padding-left: 25px;}li::before { /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px;}
li {
position: relative;
padding-left: 25px;
}
li::before {
/* Не забываем о свойстве content */
content: "";
width: 14px;
height: 14px;
background-color: #2E9AFF;
position: absolute;
left: 0;
top: 5px;
}
Открыть демо в новой вкладкеЕсли вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так.
←
Псевдоэлементы
alt + ←
→
alt + →
Псевдоэлемент ::before | CSS справочник
CSS селекторыЗначение и применение
Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом. Псевдоэлемент ::before используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.
Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:
/* синтаксис CSS 3 */
селектор::псевдоэлемент { /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}
Поддержка браузерами
| Селектор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| ::before | 4. 0 | 3.5 | 7.0* | 3.1 | 9.0* | 12.0 |
CSS синтаксис:
::before {
content: " ";
блок объявлений;
}
Версия CSS
CSS2Пример использования
Рассмотрим пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример использования псевдоэлемента ::before</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* задаем ширину элемента */
height: 100px; /* задаем высоту элемента */
}
div.omg::before { /* выбираем все элементы <div> с классом omg и добавляем перед каждым содержимое */
content: "Внимание! Спасибо за внимание!"; /* содержимое, которое будет добавлено */
}
p::before { /* выбираем все элементы <p> и добавляем перед каждым содержимое */
content: "Ответ: "; /* содержимое, которое будет добавлено */
}
</style>
</head>
<body>
<div class = "omg">
<img src = "nich. jpg" alt = "nich">
</div>
<div class = "omg">
<img src = "nich.jpg" alt = "nich">
</div>
<p>Нет</p>
<p>Да</p>
</body>
</html>
jpg" alt = "nich">
</div>
<div class = "omg">
<img src = "nich.jpg" alt = "nich">
</div>
<p>Нет</p>
<p>Да</p>
</body>
</html>
В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота
Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::before применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.
Результат нашего примера:
Пример использования псевдоэлемента ::before.Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Изменение цвета маркера.Изменение цвета маркера через использование CSS свойства content.
</title>
<style>
ul {
list-style : none; /* убираем маркеры у маркированного списка */
}
li:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */
content : "•"; /* вставляем содержимое, которое выглядит как маркер */
padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */
color : red; /* устанавливаем цвет шрифта */
}
</style>
</head>
<body>
<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</body>
</html>
Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Пример использования счетчиков в CSS.Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).h3 { counter-reset : schetchik2; /* инициализируем счетчик №2 */ } h3:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h3> */ counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */ content : "Глава № " counter(schetchik1) ". "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h3>. Значение counter определяет счетчик */ } h4 { margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */ } h4:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h4> */ counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */ content : counter(schetchik1) ".
</title>
<style>
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}
" counter(schetchik2) " "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h4>. Значение counter определяет счетчик */
}
</style>
</head>
<body>
<h3>Название главы</h3>
<h4>Статья</h4>
<h4>Статья</h4>
<h4>Статья</h4>
<h3>Название главы</h3>
<h4>Статья</h4>
<h4>Статья</h4>
<h4>Статья</h4>
<h3>Название главы</h3>
<h4>Статья</h4>
<h4>Статья</h4>
<h4>Статья</h4>
</body>
</html>
Пример добавления и изменения кавычек в тексте, используя CSS свойства content, quotes, а также псевдоэлементов :before и :after:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Пример добавления кавычек к тексту в CSS</title> <style>Пример добавления и изменения кавычек в тексте.CSS селекторы* { quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */ } p:before {content : open-quote;} /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */ p:after {content : close-quote;} /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */ </style> </head> <body> <q>Обычная цитата<q> <q>Это <q>ЦИТАТА</q> внутри цитаты</q> <p>Параграф, к которому, используя псевдоклассы добавлены кавычки.
</p>
</body>
</html>
CSS учебник
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент { Описание правил стиля }
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
.foo:first-letter { color: red }
.foo:first-line {font-style: italic}
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента :after для добавления текста в конец абзаца.
Пример 16.1. Применение :after
HTML5CSS 2.1IE 7IE 8+CrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P.new:after {
content: " - Новьё!"; /* Добавляем после текста абзаца */
}
</style>
</head>
<body>
<p>Ловля льва в пустыне с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
</body>
</html>
Результат примера показан на рис.
16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content.
Псевдоэлементы :after и :before, а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.
:before
По своему действию :before аналогичен псевдоэлементу :after, но вставляет контент до содержимого элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before.
Пример 16.2. Использование :before
HTML5CSS 2.1IE 7IE 8+CrOpSaFx 4
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
UL {
padding-left: 0; /* Убираем отступ слева */
list-style-type: none; /* Прячем маркеры списка */
}
LI:before {
content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
</body>
</html>
Результат примера показан ниже (рис.
16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
В данном примере псевдоэлемент :before устанавливается для селектора LI, определяющего элементы списка. Добавление желаемых символов происходит путём задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой
ниже на одну или несколько строк базовой линии основного текста.
Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает
с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
font-size: 90%; /* Размер шрифта */
color: black; /* Черный цвет текста */
}
P:first-letter {
font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Луч фонарика высветил старые скрипучие ступени, по которым не далее
как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь
и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли. </p>
<p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.</p>
</body>
</html>
Оля осторожно приоткрыла дверь
и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли. </p>
<p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.</p>
</body>
</html>Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
К псевдоэлементу :first-line могут
применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся
к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<p>Интересно, а существует ли способ действительно практичного применения
свойства first-line? Нет, не такого, чтобы можно было бы показать, что это
возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от
скрытых перспектив, после чего остается только сказать себе, что вот это вот, это
самое сделать по-другому, также изящно и эффектно просто невозможно.</p>
</body>
</html>
Результат примера показан на рис.
16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
- :after
- :before
- :first-line
- :first-text
- :first-letter
2. Что делает следующий стиль?
OL LI:first-letter {
color: red;
}
- Изменяет цвет первой буквы элемента маркированного списка.
- Изменяет цвет первой буквы элемента нумерованного списка.
- Изменяет цвет первой строки в маркированном списке.
- Изменяет цвет первой строки в нумерованном списке.
- Изменяет цвет текста всего списка.
3. Какой селектор написан с ошибкой?
- p.new:before
- abbr:first-line
- p.new.back:after
- div:before:first-letter
- a:hover:before
Ответы
1. :before
2. Изменяет цвет первой буквы элемента нумерованного списка.
3. div:before:first-letter
Полное руководство по псевдоэлементам CSS
27 декабря 2021 г.
Технически вы можете создать любой дизайн CSS без использования псевдоэлементов, но сделать это намного сложнее, и вы получите беспорядочный код. Псевдоэлементы удивительны, поскольку они позволяют вам добавлять/изменять HTML-код вашего сайта из CSS, что означает, что ваш HTML может оставаться чистым, а CSS может добавлять дополнительный контент, который ему нужен. Это может показаться очень запутанным, но все это обретет смысл, когда мы поговорим о первом типе псевдоэлемента.
Если вы предпочитаете учиться визуально, посмотрите видеоверсию этой статьи.
Что такое псевдоэлементы?
Я кратко упомянул, что псевдоэлементы — это способы добавления/изменения HTML-кода из CSS, но на самом деле это нечто большее. На самом деле существует два стиля псевдоэлементов.
Первый и, безусловно, самый популярный тип — это псевдоэлементы, которые позволяют вам добавлять контент в ваш HTML из CSS. Этих псевдоэлементов всего два (до и после), и большую часть времени в этой статье мы посвятим этим псевдоэлементам.
Другой стиль псевдоэлементов позволяет вам обращаться с определенными разделами вашего HTML, как если бы они были их собственными элементами. Хорошими примерами этого являются псевдоэлементы first-letter и first-line, которые позволяют вам стилизовать первую букву или строку текста, как если бы это был отдельный элемент. Другим примером является псевдоэлемент selection, который позволяет вам стилизовать выделенный текст.
Попробуйте выделить любой текст в этом абзаце, и вы увидите этот селектор в действии. Ниже приведен CSS, который я использовал для этого эффекта.
Вы заметите, что псевдоэлемент selection имеет два двоеточия перед ним. Вот как вы определяете каждый отдельный псевдоэлемент. Вы ставите два двоеточия в начале псевдоэлемента, а затем добавляете сам псевдоэлемент.
Псевдоэлементы «до/после»
Чтобы добавить содержимое в HTML, вам необходимо использовать псевдоэлементы «до» и «после». Эти псевдоэлементы позволяют вам добавить один дочерний элемент в качестве первого и/или последнего дочернего элемента любого элемента, который вы выбираете в своем CSS.
В приведенном выше коде мы добавляем на страницу два новых элемента. Элемент «до» — это первый дочерний элемент, а элемент «после» — последний дочерний элемент. Вы заметите, что если это все, что вы делаете, в вашем HTML ничего не меняется. Это связано с тем, что псевдоэлементы «до/после» требуют, чтобы для свойства content было установлено значение, чтобы они отображались на странице.
Это свойство содержимого определяет, что помещается внутрь нового дочернего элемента.
В следующем примере предположим, что мы начинаем с приведенного выше HTML, а затем применяем приведенный ниже CSS.
Теперь вы можете видеть, что хотя у нашего исходного HTML было только 2 дочерних элемента, у нашего фактического HTML, который видит браузер, есть 4 дочерних элемента. Два дочерних элемента исходят из HTML, а два других — из CSS. Если вы проверите свою страницу с помощью инструментов разработчика браузера, она, вероятно, будет выглядеть примерно так, как показано ниже. Я только что написал, как будет выглядеть фактический HTML с точки зрения того, как браузер на самом деле отображает контент.
Вы также заметите в нашем CSS, что свойство содержимого для элемента after представляет собой пустую строку. Это очень распространено и просто означает, что мы не хотим показывать какой-либо контент в этом элементе, так как вместо этого мы будем создавать собственные стили.
Это полезно, когда вы хотите создавать фигуры с помощью CSS, такие как треугольник, который отображается внизу всплывающей подсказки.
Зачем использовать псевдоэлементы «До/После»
Может показаться, что эти элементы бесполезны, но они действительно полезны, когда вы хотите добавить определенное содержимое к определенным элементам HTML, не повторяя это содержимое в вашем HTML.
Например, вы можете создать кнопку ниже с всплывающей подсказкой, используя один элемент HTML и заставив CSS позаботиться обо всем коде всплывающей подсказки.
Если вы хотите узнать больше о функции attr , используемой в этом примере, ознакомьтесь с моей статьей CSS атрибутов данных.
Если бы я не использовал псевдоэлементы в приведенном выше примере, мне нужно было бы создать отдельный HTML-элемент в моем HTML-коде, предназначенный только для всплывающей подсказки, который может быть очень запутанным и подвержен ошибкам. Вот почему псевдоэлементы намного лучше.
Другие псевдоэлементы
Как я упоминал в начале этой статьи, существует 2 стиля псевдоэлементов, и хотя элементы «до/после» являются наиболее распространенными псевдоэлементами, которые вы будете использовать, есть и другие полезные элементы, которые вы можете использовать.
:: первая буква Псевдоэлемент first-letter выбирает первую букву внутри тега p. Вы можете увидеть его в действии в начале этого абзаца. Это отлично подходит для добавления особого стиля к вашей первой букве, как это делают некоторые книги для первой буквы в главе. Следует отметить, что при стилизации первой буквы можно использовать только некоторые свойства CSS. Например, вы не можете изменить такие вещи, как отображение или свойства положения, но вы можете изменить такие вещи, как отступы или цвет.
:: первая линия Подобно псевдоэлементу первой буквы, псевдоэлемент первой строки позволяет изменить стиль только первой строки содержимого в любом элементе блочного уровня.
Этот псевдоэлемент еще более ограничен в том, какие свойства CSS вы можете использовать. Вы не можете использовать такие вещи, как поля или отступы, но вы можете изменить почти все, что связано с цветом или шрифтом.
::выбор Мы уже рассмотрели этот псевдоэлемент, но, по сути, он позволяет вам стилизовать выделенный контент на странице. Опять же, вы можете использовать только определенные свойства CSS. Разрешены практически только свойства, которые изменяют цвет или оформление текста. Вы можете выделить этот абзац для примера.
Заключение
Псевдоэлементы отлично подходят для очистки вашего HTML, сохраняя при этом продвинутый дизайн CSS. Псевдоэлементы «до» и «после» будут теми, которые вы будете использовать чаще всего, но есть много других псевдоэлементов, даже помимо тех, что описаны в этой статье, которые значительно упростят выполнение конкретных задач.
псевдоэлементов CSS — javatpoint
следующий → ← предыдущая Псевдокласс можно определить как ключевое слово, объединенное с селектором, определяющим особое состояние выбранных элементов. Например, псевдоэлемент можно использовать для оформления первой буквы или первой строки элемента. Псевдоэлементы также можно использовать для вставки содержимого после или перед элементом. СинтаксисПсевдоэлемент имеет простой синтаксис, который задается следующим образом: селектор::псевдоэлемент { стоимость имущества; } В синтаксисе мы использовали двойное двоеточие (::псевдоэлемент) . В CSS3 двойное двоеточие заменило одинарное двоеточие для обозначения псевдоэлементов. Это была попытка W3C провести различие между псевдоэлементами и псевдоклассами. Поэтому рекомендуется использовать нотация с двойным двоеточием (::псевдоэлемент) вместо использования нотации с одним двоеточием (:) . В CSS1 и CSS2 используется синтаксис с одним двоеточием (:) как для псевдоэлементов, так и для псевдоклассов. Хотя существует несколько псевдоэлементов CSS, мы обсудим некоторые из наиболее часто используемых. Широко используемые псевдоэлементы CSS сведены в следующую таблицу:
Давайте обсудим приведенные выше псевдоэлементы вместе с примером. Псевдоэлемент ::first-letterКак следует из названия, влияет на первую букву текста. Его можно применять только к элементам блочного уровня. Вместо того, чтобы поддерживать все свойства CSS, он поддерживает некоторые из свойств CSS, которые приведены ниже.
Пример<голова> <стиль> тело{ выравнивание текста: по центру; } h2:: первая буква { семейство шрифтов: Lucida Calligraphy; размер шрифта: 3 см; красный цвет; тень текста: 5px 8px 9пикс зеленый; } h2{ цвет синий; } <тело> Добро пожаловать на сайт javaTpoint.comЭто пример псевдоэлемента ::first-letter.Протестируйте сейчасВыход Псевдоэлемент ::first-line Аналогичен псевдоэлементу ::first-letter , но влияет на всю строку. Он добавляет спецэффекты к первой строке текста.
ПримерВ этом примере мы увидим использование элемента ::first-line для добавления специальных эффектов к первой строке элемента. <голова> <стиль> тело{ выравнивание текста: по центру; } h2:: первая строка { семейство шрифтов: Lucida Calligraphy; размер шрифта: 1 см; красный цвет; тень текста: 5px 8px 9px зеленый; } <тело> Добро пожаловать на сайт javaTpoint. com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. Сайт javaTpoint.com стремится предоставлять простые и подробные учебные пособия по различным технологиям.Это пример псевдоэлемента ::first-line.Протестируйте сейчасВыход Псевдоэлемент ::beforeЭто позволяет нам добавить что-то перед содержимым элемента. Он используется для добавления чего-либо перед определенной частью элемента. Как правило, он используется со свойством content . Мы также можем добавить обычные строки или изображения перед содержимым, используя этот псевдоэлемент. Пример<голова> <стиль> тело{ выравнивание текста: по центру; } h2 :: до { content: «‘Привет, мир'»; красный цвет; } <тело> Добро пожаловать на сайт javaTpoint.com.Это пример псевдоэлемента ::before. В первой строке добавлено «Hello World» с помощью псевдоэлемента ::beforeПротестируйте сейчасВыход Псевдоэлемент ::afterРаботает аналогично псевдоэлементу ::before , но содержимое вставляется после содержимого элемента. Он используется для добавления чего-либо после определенной части элемента. Как правило, он используется со свойством содержимого. Это также позволяет нам добавлять обычные строки или изображения после содержимого. Пример<голова> <стиль> тело{ выравнивание текста: по центру; } h2 :: после { content: «‘Добро пожаловать на javaTpoint.com.'»; красный цвет; } <тело> Привет, мир.Это пример псевдоэлемента ::after.В первой строке надпись «Добро пожаловать на javaTpoint.com». добавил с помощью псевдоэлемента ::afterПротестируйте сейчасВыход Псевдоэлемент ::selection Используется для стилизации части элемента, выбранной пользователем.
Пример<голова> <стиль> тело{ выравнивание текста: по центру; } h2 :: выбор { красный цвет; } <тело> Привет, мир.Выберите текст в первой строке, чтобы увидеть эффект.Это пример псевдоэлемента ::selection.Протестируйте сейчасВыход Классы CSS и псевдоэлементПсевдоэлементы можно комбинировать с классами CSS для стилизации определенного элемента, имеющего этот класс. Синтаксис объединения классов CSS с псевдоэлементами приведен ниже. СинтаксисМожно записать как: selector.class::псевдоэлемент { стоимость имущества } ПримерЭтот пример повлияет на первую букву тех элементов , которые имеютclass=»example» вместо того, чтобы воздействовать на все элементы. <голова> <стиль> тело{ выравнивание текста: по центру; } h2.example:: первая буква { красный цвет; размер шрифта: 2 см; семейство шрифтов: Lucida Calligraphy; } <тело> Привет, мир.Добро пожаловать на сайт javaTpoint.com.Это пример псевдоэлемента с классами CSS.Протестируйте сейчасВыход Следующая темаCSS радиальный градиент ← предыдущая следующий → |
В отличие от псевдоклассов, псевдоэлементы используются для стилизации определенной части элемента, тогда как псевдоклассы используются для стилизации элемента.
Синтаксис с одним двоеточием допустим для псевдоэлементов в CSS1 и CSS2 для обратной совместимости.
Он поддерживает следующие свойства CSS:
Мы можем использовать с ним следующие свойства CSS:Различные уловки для: перед псевдо -элементами, используя свойство позиции в CSS
|
center {