Псевдоэлементы ::before и ::after: Тренажер CSS

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

Эта серия заданий посвящена псевдоэлементам CSS `::before` и `::after`. Вы научитесь добавлять и стилизовать контент до или после содержимого элемента, не изменяя HTML-структуру. Задания охватывают основы добавления текста, использование атрибутов, создание декоративных элементов и позиционирование. Вам нужно будет заполнить пропущенные части CSS-кода, чтобы достичь желаемого визуального результата, который будет отображаться во фрейме. Сложность заданий постепенно возрастает.

Список тем

Добавление текста перед элементом

Используйте псевдоэлемент `::before`, чтобы добавить текст "Привет: " перед содержимым параграфа с классом `greeting`. Текст должен появиться непосредственно перед словом 'Мир'.

CSS

.greetinginput1 {
  input2: "Привет: ";
}

                     .greetinginput1 {
  input2: "Привет: ";
}

HTML

<p class="greeting">Мир!</p>

Нужно выбрать параграф с классом `greeting` и применить к нему псевдоэлемент `::before`. Внутри псевдоэлемента используйте свойство `content`, чтобы указать добавляемый текст. Не забудьте пробел после двоеточия.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление текста после элемента

Используйте псевдоэлемент `::after`, чтобы добавить восклицательный знак "!" после содержимого элемента `span` внутри параграфа. Текст должен выглядеть как 'Важное сообщение!'.

CSS

.message spaninput1 {
  content: input2;
}

                     .message spaninput1 {
  content: input2;
}

HTML

<p class="message"><span>Важное сообщение</span></p>

Выберите элемент `span` внутри параграфа с классом `message`. Примените к нему псевдоэлемент `::after`. Используйте свойство `content`, чтобы добавить восклицательный знак.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация добавленного текста

Добавьте текст 'Статус: ' перед элементом с классом `status`. Сделайте этот добавленный текст жирным с помощью соответствующего CSS-свойства.

CSS

.status::before {
  content: "Статус: ";
  input1: input2;
}

                     .status::before {
  content: "Статус: ";
  input1: input2;
}

HTML

<p class="status">Активен</p>

Используйте псевдоэлемент `::before` и свойство `content` для добавления текста. Затем добавьте CSS-свойство `font-weight` со значением `bold`, чтобы сделать текст жирным.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование `attr()` для вывода атрибута

Для каждой ссылки с классом `external-link` добавьте ее URL-адрес в скобках после текста ссылки. Используйте псевдоэлемент `::after` и функцию `attr()` для получения значения атрибута `href`.

CSS

.external-link::after {
  input1: " (" input2(href) ")";
  margin-left: 5px; 
  font-size: 0.8em; 
  color: #555; 
}

                     .external-link::after {
  input1: " (" input2(href) ")";
  margin-left: 5px; 
  font-size: 0.8em; 
  color: #555; 
}

HTML

<a class="external-link" href="https://example.com">Пример сайта</a>
<br>
<a class="external-link" href="https://test.org">Тестовый сайт</a>

Выберите ссылки с классом `external-link` и примените псевдоэлемент `::after`. В свойстве `content` используйте функцию `attr(href)`, чтобы получить значение атрибута `href`. Добавьте также открывающую и закрывающую скобки вокруг значения атрибута.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Создание декоративного элемента перед заголовком

Добавьте небольшой квадрат слева от заголовка `h2` с классом `decorated-title`. Квадрат должен быть размером 10x10 пикселей и синего цвета. Используйте `::before`.

CSS

.decorated-titleinput1 {
  content: "";
  input2: inline-block;
  width: 10px; 
  height: 10px; 
  background-color: blue; 
  margin-right: 8px; 
}

                     .decorated-titleinput1 {
  content: "";
  input2: inline-block;
  width: 10px; 
  height: 10px; 
  background-color: blue; 
  margin-right: 8px; 
}

HTML

<h2 class="decorated-title">Декорированный заголовок</h2>

Примените `::before` к `h2.decorated-title`. Задайте пустое свойство `content: ""`. Используйте `display: inline-block` (или `block`), чтобы задать размеры. Установите `width`, `height` и `background-color`. Добавьте `margin-right`, чтобы отодвинуть квадрат от текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление иконки после ссылки

Добавьте небольшую иконку (из предоставленных URL) после каждой ссылки с классом `icon-link`. Иконка должна отображаться как строчно-блочный элемент.

CSS

.icon-link::after {
  input1: url('https://naytikurs.ru/img/7.png');
  input2: inline-block;
  width: 16px; 
  height: 16px; 
  margin-left: 5px; 
  vertical-align: middle; 
}

                     .icon-link::after {
  input1: url('https://naytikurs.ru/img/7.png');
  input2: inline-block;
  width: 16px; 
  height: 16px; 
  margin-left: 5px; 
  vertical-align: middle; 
}

HTML

<a href="#" class="icon-link">Ссылка с иконкой</a>

Используйте `::after` для ссылок с классом `icon-link`. В свойстве `content` используйте `url()` для вставки изображения. Задайте `display: inline-block`, чтобы иконка корректно отображалась рядом с текстом. Можно добавить небольшой отступ слева (`margin-left`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Абсолютное позиционирование ::before

Создайте декоративный элемент с помощью `::before` для блока с классом `highlight`. Этот элемент должен быть красным кругом диаметром 8px, расположенным в верхнем левом углу блока, немного выходя за его пределы. Блок `highlight` уже имеет `position: relative`.

CSS

.highlight {
  position: relative; 
  padding: 20px; 
  background-color: #eee; 
  margin-top: 15px; 
}

.highlight::before {
  content: "";
  input1: absolute;
  width: 8px; 
  height: 8px; 
  background-color: red; 
  border-radius: 50%; 
  input2: -4px;
  left: -4px;
}

                     .highlight {
  position: relative; 
  padding: 20px; 
  background-color: #eee; 
  margin-top: 15px; 
}

.highlight::before {
  content: "";
  input1: absolute;
  width: 8px; 
  height: 8px; 
  background-color: red; 
  border-radius: 50%; 
  input2: -4px;
  left: -4px;
}

HTML

<div class="highlight">Важный блок</div>

Используйте `::before` для `.highlight`. Задайте `content: ""`. Установите `position: absolute`. Задайте `width`, `height` и `border-radius: 50%` для создания круга. Используйте свойства `top` и `left` с отрицательными значениями, чтобы спозиционировать круг.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Абсолютное позиционирование ::after

Добавьте декоративную ленточку в правый верхний угол блока с классом `featured` с помощью `::after`. Ленточка должна быть треугольником. Блок `featured` уже имеет `position: relative`.

CSS

.featured {
  position: relative; 
  padding: 15px; 
  background-color: lightyellow; 
  border: 1px solid #ccc; 
  margin-top: 10px; 
  overflow: hidden; /* Важно для обрезки, если нужно */
}

.featuredinput1 {
  content: "";
  input2: absolute;
  top: 0;
  right: 0;
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 0 0 30px 30px; 
  border-color: transparent transparent green transparent; 
}

                     .featured {
  position: relative; 
  padding: 15px; 
  background-color: lightyellow; 
  border: 1px solid #ccc; 
  margin-top: 10px; 
  overflow: hidden; /* Важно для обрезки, если нужно */
}

.featuredinput1 {
  content: "";
  input2: absolute;
  top: 0;
  right: 0;
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 0 0 30px 30px; 
  border-color: transparent transparent green transparent; 
}

HTML

<div class="featured">Избранный товар</div>

Используйте `::after` для `.featured`. Задайте `content: ""`. Установите `position: absolute`. Для создания треугольника с помощью границ задайте `width: 0`, `height: 0`, а затем определите размеры и цвета границ (`border-top`, `border-left`, `border-right`, `border-bottom`). Расположите его в правом верхнем углу с помощью `top: 0` и `right: 0`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Декоративное подчеркивание через ::after

Создайте эффект подчеркивания для элемента `span` с классом `underline-effect`, которое появляется при наведении. Подчеркивание должно быть линией толщиной 2px под текстом. Используйте `::after`.

CSS

.underline-effect {
  position: relative;
  cursor: pointer;
}

.underline-effectinput1 {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px; 
  width: 0; /* Начальная ширина 0 */
  background-color: dodgerblue; 
  input2: width 0.3s ease; /* Плавный переход */
}

.underline-effect:hover::after {
  input3: 100%;
}

                     .underline-effect {
  position: relative;
  cursor: pointer;
}

.underline-effectinput1 {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px; 
  width: 0; /* Начальная ширина 0 */
  background-color: dodgerblue; 
  input2: width 0.3s ease; /* Плавный переход */
}

.underline-effect:hover::after {
  input3: 100%;
}

HTML

<p>Наведите на <span class="underline-effect">этот текст</span>.</p>

Родительскому элементу (`span.underline-effect`) задайте `position: relative`. Для `span.underline-effect::after` задайте `content: ""`, `position: absolute`, `height: 2px`, `background-color`. Расположите линию под текстом с помощью `bottom: -4px` (или около того) и `left: 0`. Изначально задайте `width: 0` и `transition: width 0.3s`. При наведении на `span` (`span.underline-effect:hover::after`) измените `width` на `100%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Кастомные маркеры списка

Замените стандартные маркеры неупорядоченного списка (`ul` с классом `custom-list`) на символ '→ '. Используйте псевдоэлемент `::before` для элементов списка `li`.

CSS

ul.custom-list {
  input1: none;
  padding-left: 0; /* Убираем стандартный отступ */
}

ul.custom-list li {
  padding-left: 20px; /* Добавляем отступ для маркера */
  position: relative; /* Для позиционирования маркера, если нужно */
}

ul.custom-list liinput2 {
  input3: "→ ";
  /* Можно добавить позиционирование, если маркер не встал как надо */
  /* position: absolute; left: 0; */
  color: green; 
}

                     ul.custom-list {
  input1: none;
  padding-left: 0; /* Убираем стандартный отступ */
}

ul.custom-list li {
  padding-left: 20px; /* Добавляем отступ для маркера */
  position: relative; /* Для позиционирования маркера, если нужно */
}

ul.custom-list liinput2 {
  input3: "→ ";
  /* Можно добавить позиционирование, если маркер не встал как надо */
  /* position: absolute; left: 0; */
  color: green; 
}

HTML

<ul class="custom-list">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>

Сначала скройте стандартные маркеры у списка `ul.custom-list`, используя `list-style: none`. Затем для каждого элемента `li` внутри этого списка (`ul.custom-list li`) примените `::before`. В свойстве `content` укажите желаемый символ '→ '.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление кавычек к цитате

Оберните текст цитаты (`blockquote` с классом `quote`) в кавычки-ёлочки (« »), используя псевдоэлементы `::before` и `::after`.

CSS

blockquote.quoteinput1 {
  content: "«";
  margin-right: 0.3em;
}

blockquote.quoteinput2 {
  content: "»";
  margin-left: 0.3em;
}

                     blockquote.quoteinput1 {
  content: "«";
  margin-right: 0.3em;
}

blockquote.quoteinput2 {
  content: "»";
  margin-left: 0.3em;
}

HTML

<blockquote class="quote">Это текст цитаты, который нужно обернуть в кавычки.</blockquote>

Используйте `::before` для `blockquote.quote`, чтобы добавить открывающую кавычку « (`content: '«'`). Используйте `::after` для `blockquote.quote`, чтобы добавить закрывающую кавычку » (`content: '»'`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Создание наложения на изображение

Создайте полупрозрачное темное наложение на изображение внутри контейнера с классом `image-container` при наведении на контейнер. Используйте `::after`. Контейнер уже имеет `position: relative`.

CSS

.image-container {
  position: relative;
  width: 200px; 
  display: inline-block; /* Чтобы контейнер облегал картинку */
}

.image-container img {
  display: block; /* Убирает лишний отступ под картинкой */
  width: 100%; 
}

.image-containerinput1 {
  content: "";
  input2: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover::after {
  input3: 1;
}

                     .image-container {
  position: relative;
  width: 200px; 
  display: inline-block; /* Чтобы контейнер облегал картинку */
}

.image-container img {
  display: block; /* Убирает лишний отступ под картинкой */
  width: 100%; 
}

.image-containerinput1 {
  content: "";
  input2: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover::after {
  input3: 1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/5.png" alt="Пример">
</div>

Для `.image-container::after` задайте `content: ""`, `position: absolute`. Растяните псевдоэлемент на весь контейнер с помощью `top: 0`, `left: 0`, `right: 0`, `bottom: 0` (или `width: 100%`, `height: 100%`). Задайте полупрозрачный фон (`background-color: rgba(0, 0, 0, 0.5)`). Изначально сделайте псевдоэлемент невидимым (`opacity: 0`) и добавьте `transition: opacity 0.3s`. При наведении на контейнер (`.image-container:hover::after`) установите `opacity: 1`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку