Основы CSS: псевдоэлементы

В этом уроке мы узнаем о псевдоэлементах CSS!

Псевдоэлемент используется для стилизации определенных частей элемента. Например, мы могли бы использовать его для стилизации первой буквы (::first-letter) или строки (::first-line) элемента. Или мы могли бы использовать его для добавления содержимого до (::before) или после (::after) содержимого элемента.

Например:

p::first-letter {
  color: red;
  text-transform: uppercase;
}

Здесь первая буква каждого <p> выбирается псевдоэлементом ::first-letter. Цвет изменится на красный, а текст будет переведен в верхний регистр.

Вы узнаете, когда увидите псевдоэлементы, поскольку они начинаются с двойного двоеточия ::. Хотя можно использовать и одиночное двоеточие, по соглашению используется двойное значение, чтобы отличать их от псевдоклассов.

🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!

Подпишитесь на мою рассылку здесь → https://easeout.eo.page

Список псевдоэлементов

::first-letter используется для стилизации первой буквы блока текста.
::first-line используется для стилизации первой строки блока текста.
::before позволяет добавлять содержимое перед элементом.
::after позволяет добавлять содержимое после элемента.
::selection нацелен на текст, выбранный пользователем.

Есть и другие, но они считаются экспериментальными. В этом уроке мы сосредоточимся на этих основных псевдоэлементах.

::первое письмо

Как мы видели ранее, псевдоэлемент ::first-letter используется для добавления стилей только к первой букве текста.

Например, давайте изменим первую букву текста во всех <p> элементах на более крупный размер шрифта:

p::first-letter {
  font-size: 150%;
}

Следует отметить, что ::first-letter может применяться только к элементам уровня блока. Это любой элемент, который начинается с новой строки и занимает всю ширину страницы, например от <div>, от <h1> до <h6>, <p> и т. Д. Он не может применяться к встроенным элементам, таким как <span> или <code>.

Изящный трюк - объединить селекторы псевдоэлементов с классами:

p.summary::first-letter {
  color: red;
}

Итак, здесь мы можем стилизовать первую букву каждого абзаца с помощью класса summary.

::первая строка

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

Так, например, чтобы выделить первую строку всех <p> элементов более жирным шрифтом, можно использовать следующее:

p::first-line {
  font-weight: 600;
}

Обратите внимание, что только часть доступных свойств CSS может использоваться для стилизации ::first-line. Обычно только свойства, связанные со шрифтом, текстом и фоном.

::до и после

Это, вероятно, наиболее часто используемые псевдоэлементы. С ::before и ::after мы можем вставлять контент на страницу без необходимости его размещения в нашем HTML. Конечного результата на самом деле нет в DOM, хотя он отображается на странице, как если бы он был.

Для иллюстрации см. Следующий CSS:

div::before {   
   content: "before"; 
} 
div::after {   
   content: "after"; 
}

Примечание. свойство content является обязательным, поскольку оно определяет добавляемый контент!

Это переводится в следующий HTML:

<div>   
   before   
   <!-- Everything else in our div -->   
   after 
</div>

::до

Таким образом, псевдоэлемент ::before можно использовать для вставки некоторого содержимого перед содержимым элемента.

Типичным вариантом использования может быть добавление значка перед содержимым каждого <h1> элемента:

h1::before {
  content: url(icon.png);
}

С помощью свойства content вы можете вставлять любой контент:

p::before {
  content: "Check this out: ");
  color: green;
  font-weight: bold;
}
.company::before {
   content: url("images/logo.png");
}

::после

Псевдоэлемент ::after может использоваться для вставки некоторого содержимого после содержимого элемента.

Здесь мы вставляем значок после содержимого каждого <h1> элемента:

h1::after {
  content: url(icon.png);
}

Или мы могли бы добавить стрелку после любых ссылок:

a::after {
  content: "→";
}

:: выбор

Псевдоэлемент ::selection - еще одно чрезвычайно полезное свойство. Он соответствует части элемента, выбранной пользователем.

Мы можем использовать это для стилизации выделенного текста. Здесь мы установили его зеленый цвет с серым фоном:

::selection {
  color: green;
  background: grey;
}

К ::selection можно применить следующие свойства: color, background, cursor и outline.

Готовы ли вы поднять свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: Полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!

Заключение

И вот так! Мы узнали все о том, как использовать псевдоэлементы для стилизации нашего контента. Псевдоэлементы - это здорово! Они предоставляют несколько чрезвычайно полезных решений, когда нам нужно стилизовать части элементов.