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

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

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

Список тем

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

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

CSS

liinput1 {
  input2: "→ ";
}

                     liinput1 {
  input2: "→ ";
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Нужно добавить небольшой текст '(конец абзаца)' после каждого абзаца на странице. Используйте для этого псевдоэлемент ::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

Замените стандартные маркеры списка на небольшие синие квадраты. Вам нужно скрыть стандартные маркеры и добавить квадрат с помощью ::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` для отступа от текста.

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

Результат

Сообщения

Выполнить

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

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

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

Создайте декоративную красную линию над заголовком 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-*

У каждой ссылки есть атрибут `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) ")";`.

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

Результат

Сообщения

Выполнить

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

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

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

Добавьте небольшую иконку (файл '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;` для выравнивания по центру строки.

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

Результат

Сообщения

Выполнить

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

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

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

Оформите цитату (элемент `<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`, если абсолютное позиционирование не требуется.

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

Результат

Сообщения

Выполнить

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

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

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

Создайте эффект затемнения изображения при наведении курсора. Используйте псевдоэлемент `::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)`).

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

Результат

Сообщения

Выполнить

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

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