Создание декоративных элементов с помощью псевдоэлементов [Модуль 3: Селекторы CSS продвинутый уровень]: Тренажер CSS

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

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

Список тем

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

id: 37342_pseudo-before-basic-char

Ваша задача — добавить декоративный символ '→ ' перед каждым элементом списка. Используйте псевдоэлемент ::before и свойство content, чтобы вставить нужный символ.

CSS

liinput1 {
  input2: "→ ";
}

                     liinput1 {
  input2: "→ ";
}

HTML

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>

Чтобы добавить контент перед элементом, используйте псевдоэлемент `::before`. Внутри него необходимо указать свойство `content` со строковым значением, содержащим нужный символ и пробел после него (например, `'→ '`).

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

Результат

Сообщения

Выполнить

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

Добавление текста после абзаца

id: 37342_pseudo-after-basic-text

Нужно добавить небольшой текст '(конец абзаца)' после каждого абзаца на странице. Используйте для этого псевдоэлемент ::after и свойство content.

CSS

pinput1 {
  content: input2;
  font-style: italic;
  color: grey;
}

                     pinput1 {
  content: input2;
  font-style: italic;
  color: grey;
}

HTML

<p>Это первый абзац текста.</p>
<p>Это второй абзац, он немного длиннее.</p>

Для добавления контента после элемента используется псевдоэлемент `::after`. Укажите его для селектора `p` и задайте свойство `content` с нужным текстом в кавычках. Возможно, потребуется добавить пробел перед текстом в `content` для визуального отделения.

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

Результат

Сообщения

Выполнить

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

Стилизация маркера списка с помощью ::before

id: 37342_pseudo-before-styled-marker

Замените стандартные маркеры списка на небольшие синие квадраты. Вам нужно скрыть стандартные маркеры и добавить квадрат с помощью ::before к каждому элементу списка.

CSS

ul {
  input1: none;
  padding-left: 20px;
}

li {
  /* Добавим немного отступа снизу для наглядности */
  margin-bottom: 5px; 
}

li::before {
  content: "";
  input2: inline-block;
  width: 8px;
  height: 8px;
  input3: blue;
  margin-right: 8px;
  /* Небольшая коррекция вертикального выравнивания */
  position: relative;
  top: -1px;
}

                     ul {
  input1: none;
  padding-left: 20px;
}

li {
  /* Добавим немного отступа снизу для наглядности */
  margin-bottom: 5px; 
}

li::before {
  content: "";
  input2: inline-block;
  width: 8px;
  height: 8px;
  input3: blue;
  margin-right: 8px;
  /* Небольшая коррекция вертикального выравнивания */
  position: relative;
  top: -1px;
}

HTML

<ul>
  <li>Элемент один</li>
  <li>Элемент два</li>
  <li>Элемент три</li>
</ul>

Сначала уберите стандартные маркеры у списка `ul` с помощью `list-style: none;`. Затем для `li::before` задайте `content: "";` (пустое содержимое), `display: inline-block;` (чтобы можно было задать размеры), укажите `width`, `height` (например, 8px) и `background-color` (синий). Добавьте `margin-right` для отступа от текста.

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

Результат

Сообщения

Выполнить

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

Декоративная линия над заголовком

id: 37342_pseudo-before-line-above

Создайте декоративную красную линию над заголовком h2. Линия должна быть шириной 50px и высотой 3px. Используйте псевдоэлемент ::before и абсолютное позиционирование.

CSS

h2 {
  input1: relative;
  padding-top: 15px; /* Добавим отступ сверху, чтобы линия не наезжала */
  margin-left: 10px; /* Небольшой отступ слева для наглядности */
}

h2::before {
  content: "";
  input2: absolute;
  width: 50px;
  height: 3px;
  background-color: red;
  top: 0; /* Позиционируем сверху */
  input3: 0;
}

                     h2 {
  input1: relative;
  padding-top: 15px; /* Добавим отступ сверху, чтобы линия не наезжала */
  margin-left: 10px; /* Небольшой отступ слева для наглядности */
}

h2::before {
  content: "";
  input2: absolute;
  width: 50px;
  height: 3px;
  background-color: red;
  top: 0; /* Позиционируем сверху */
  input3: 0;
}

HTML

<h2>Декоративный заголовок</h2>
<p>Текст под заголовком.</p>

Заголовку `h2` нужно задать `position: relative;`, чтобы псевдоэлемент позиционировался относительно него. Псевдоэлементу `h2::before` задайте `content: "";`, `display: block;` (или `inline-block`), `position: absolute;`. Установите `width`, `height` и `background-color`. Используйте `top` и `left` для позиционирования линии над заголовком (например, `top: -10px; left: 0;`).

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

Результат

Сообщения

Выполнить

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

Отображение значения атрибута data-*

id: 37342_pseudo-after-attr

У каждой ссылки есть атрибут `data-tooltip`. Ваша задача — отобразить значение этого атрибута в скобках после текста ссылки, используя псевдоэлемент ::after и функцию `attr()`.

CSS

a::after {
  input1: " (" input2(data-tooltip) ")";
  font-size: 0.8em;
  color: green;
  margin-left: 5px;
}

                     a::after {
  input1: " (" input2(data-tooltip) ")";
  font-size: 0.8em;
  color: green;
  margin-left: 5px;
}

HTML

<p>Посетите <a href="#" data-tooltip="Главная страница">наш сайт</a> или <a href="#" data-tooltip="Раздел контактов">свяжитесь с нами</a>.</p>

Используйте псевдоэлемент `::after` для селектора `a`. В свойстве `content` используйте функцию `attr()` для получения значения атрибута `data-tooltip`. Чтобы добавить скобки и пробел, конкатенируйте строки: `content: " (" attr(data-tooltip) ")";`.

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

Результат

Сообщения

Выполнить

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

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

id: 37342_pseudo-before-icon

Добавьте небольшую иконку (файл '1.png') перед текстом внешней ссылки (ссылки, у которой есть атрибут `target="_blank"`). Иконка должна быть размером 16x16 пикселей.

CSS

a[target="_blank"]input1 {
  input2: url('https://naytikurs.ru/img/1.png');
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  input3: middle;
}

                     a[target="_blank"]input1 {
  input2: url('https://naytikurs.ru/img/1.png');
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  input3: middle;
}

HTML

<p>
  <a href="#">Внутренняя ссылка</a><br>
  <a href="#" target="_blank">Внешняя ссылка 1</a><br>
  <a href="#" target="_blank">Внешняя ссылка 2</a>
</p>

Используйте селектор `a[target="_blank"]` и псевдоэлемент `::before`. В свойстве `content` используйте функцию `url()` для вставки изображения: `content: url('https://naytikurs.ru/img/1.png');`. Чтобы иконка отображалась корректно рядом с текстом, задайте `display: inline-block;`, `width` и `height` (16px). Используйте `margin-right` для отступа и `vertical-align: middle;` для выравнивания по центру строки.

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

Результат

Сообщения

Выполнить

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

Создание кавычек для цитаты

id: 37342_pseudo-quotes

Оформите цитату (элемент `<blockquote>`), добавив большие стилизованные кавычки до и после текста цитаты с помощью псевдоэлементов `::before` и `::after`.

CSS

blockquote {
  input1: relative;
  padding: 10px 40px;
  margin: 20px;
  background-color: #f9f9f9;
  border-left: 5px solid #ccc;
  font-style: italic;
}

blockquote::before,
blockquote::after {
  input2: absolute;
  font-size: 3em; /* Большой размер кавычек */
  color: #ccc;
  line-height: 1;
}

blockquote::before {
  content: '“';
  input3: 10px;
  top: 5px;
}

blockquote::after {
  content: '”';
  right: 10px;
  bottom: -15px; /* Смещаем немного вниз */
}

                     blockquote {
  input1: relative;
  padding: 10px 40px;
  margin: 20px;
  background-color: #f9f9f9;
  border-left: 5px solid #ccc;
  font-style: italic;
}

blockquote::before,
blockquote::after {
  input2: absolute;
  font-size: 3em; /* Большой размер кавычек */
  color: #ccc;
  line-height: 1;
}

blockquote::before {
  content: '“';
  input3: 10px;
  top: 5px;
}

blockquote::after {
  content: '”';
  right: 10px;
  bottom: -15px; /* Смещаем немного вниз */
}

HTML

<blockquote>Это пример цитаты, которую нужно оформить с помощью псевдоэлементов, добавив кавычки.</blockquote>

Используйте `::before` и `::after` для `blockquote`. Задайте им `content` со значениями открывающей и закрывающей кавычек (`'“'` и `'”'`). Чтобы кавычки были большими и стилизованными, увеличьте `font-size`, измените `color`. Для позиционирования можно использовать `position: absolute` (не забудьте `position: relative` для `blockquote`) или просто настроить `vertical-align` и `margin`, если абсолютное позиционирование не требуется.

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

Результат

Сообщения

Выполнить

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

Полупрозрачное наложение на изображение при наведении

id: 37342_pseudo-after-overlay-hover

Создайте эффект затемнения изображения при наведении курсора. Используйте псевдоэлемент `::after` для создания полупрозрачного черного слоя поверх изображения.

CSS

.image-container {
  input1: relative;
  display: inline-block; /* Чтобы контейнер был по размеру изображения */
  line-height: 0; /* Убрать возможный отступ под изображением */
}

.image-container img {
  display: block; /* Убрать возможный отступ под изображением */
  max-width: 100%;
}

.image-container:hover::after {
  content: "";
  input2: absolute;
  top: 0;
  left: 0;
  input3: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

                     .image-container {
  input1: relative;
  display: inline-block; /* Чтобы контейнер был по размеру изображения */
  line-height: 0; /* Убрать возможный отступ под изображением */
}

.image-container img {
  display: block; /* Убрать возможный отступ под изображением */
  max-width: 100%;
}

.image-container:hover::after {
  content: "";
  input2: absolute;
  top: 0;
  left: 0;
  input3: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/4.png" alt="Пример изображения" width="300">
</div>

Контейнеру `.image-container` задайте `position: relative;` и `display: inline-block;`. Псевдоэлементу `.image-container:hover::after` задайте `content: "";`, `position: absolute;`, `top: 0;`, `left: 0;`. Чтобы слой покрыл все изображение, используйте `input3: 0;` и `bottom: 0;`. Задайте `background-color` с полупрозрачным черным цветом (например, `rgba(0, 0, 0, 0.5)`).

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

Результат

Сообщения

Выполнить

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