Одним із способів додати елегантну прикрасу до тексту на веб-сторінці є створення лінії під ним. Це може бути корисним для виділення заголовків, підзаголовків, особливих акцентів або відділення відступів. Хоча HTML не надає спеціального тегу для створення лінії, можна використовувати інші теги та властивості CSS, щоб досягти бажаного ефекту.
Один із способів створити лінію під текстом – використовувати тег та властивість CSS "text-decoration: underline". При цьому текст виділятиметься смугою, що проходить під ним. Наприклад:
Текст із лінією
Ще один спосіб створення лінії під текстом – використання властивості CSS "border-bottom". Це дозволяє встановити стиль, колір і товщину лінії. Наприклад:
Текст із лінієюБудь-який із цих підходів можна доповнити іншими CSS властивостями, щоб налаштувати зовнішній вигляд та стиль лінії під текстом. Вони дозволяють змінювати товщину, колір, стиль лінії та її розташування стосовно тексту.
| Тег | Опис |
|---|---|
| hr | Тег hr є горизонтальною лінією, яка використовується для поділу вмісту на розділи. За умовчанням лінія малюється як горизонтальна смуга, що тягнеться на всю ширину батьківського елемента. |
| div | Тег div призначений для створення блокового елемента, який можна використовувати для організації різних розділів веб-сторінки. Однак за замовчуванням div не створює меж або відступів, тому для створення лінії під текстом може знадобитися додавання стилів. |
| ul | Тег ul призначений для створення маркованого списку, де кожен елемент списку відображається як маркера.Цей тег не має прямого впливу на створення лінії під текстом, але його нащадки можуть бути використані в сукупності зі стилями для створення бажаного ефекту. |
| li | Тег li призначений для створення списку. Він використовується всередині ul або ol теги для визначення окремих елементів списку. Як і у випадку з ul тегом, сам li не створює лінію під текстом, але його стилі можуть бути використані для цієї мети. |
| fieldset | Тег fieldset призначений для створення групи пов'язаних елементів форми. Він може використовуватися для логічної організації елементів форми навколо загальної теми чи завдання. Подібно до інших тегів, полепочатку сам по собі не створює лінію під текстом, але його стилі можуть бути налаштовані для створення цього ефекту. |
Як зробити смужку під текстом у HTML?
Лінія під текстом на всю ширину блоку Щоб створити лінію під текстом, слід додати до елементу стильову властивість border-bottom, його значенням виступає одночасно товщина лінії, її стиль та колір (Приклад 1). Відстань від лінії до тексту можна регулювати властивістю padding-bottom, додаючи його до селектора H1.
Як зробити пряму лінію в HTML?
За допомогою тегу <hr> можна намалювати горизонтальну лінію, вигляд якої залежить від атрибутів, що використовуються, а також браузера. Тег відноситься до блокових елементів, тому лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.
Як зробити лінію над текстом CSS?
Отже, якщо нам потрібно розмістити вертикальну або горизонтальну лінію згори або з лівого боку елемента, то нам потрібно використовувати псевдоелемент: before. Якщо ж лінія має бути праворуч або знизу, то ми маємо використовувати псевдоелемент: after.