Назад Вперед Зміст

Вкладені flex блоки

Приклад

HTML для цього досить простий. У нас є елемент <section>, що містить три <article>. Третій <article> містить ще три <div>.

section article

___

 ______
_______ article

div

 button
_______ article

div

 button
_______ _______

div

 button
_______ _______

___

 button
_______ _______

___

 button

Приклад flex вкладених блоків

CSS для прикладу

Вспливаюча підказка

Реалізуємо вспливаючу підказку на чистому CSS при наведенні на фрагмент виділеного тексту або посилання.

Виконаємо наступну послідовність дій.

  1. Створимо абзац з текстом з щоденників Бунина.
  2. Пропишемо посилання всередині тексту.
  3. Всередині тегу a додамо атрибут aria-label з текстом підказки
    "Одеса 23 липня 1919 року. Бунин – дні прокляті"

HTML код вспливаючої підказки

  1. Стилізуємо псевдоелемент ::after як контейнер для тексту вспливаючої підказки.
  2. За допомогою ::before зробимо маленький трикутник.
  3. Сховаємо псевдоелемент на сторінці.

CSS стилі для вспливаючої підказки

  1. Покажемо вспливаючу підказку при наведенні на посилання в тексті.

Назад Вперед Зміст