Як реалізувати через css підкреслення пунктиром потрібних слів

Іноді деякі слова на веб-сторінці потрібно оформити так, що в html для цього не передбачено ніяких тегів. Наприклад, в css підкреслення пунктиром, подвійну лінію і інші декоративні елементи оформлення реалізувати можна, тому що ця мова для цього і створений.

Як в css підкреслити пунктиром текст

Для цього до потрібного елементу потрібно дописати властивість border (межа або рамка). Воно має три параметри:

Для легкого підкреслення зазвичай досить задати товщину в 1-2 пікселя. А ось другий параметр як раз нам і потрібен, тому що саме він визначає тип лінії. Пунктирна лінія відповідає ключовим словом dashed. Хмарно - solid.

Отже, щоб задати нижню пунктирне підкреслення червоного кольору, потрібно записати всі наступним чином:

Справа в тому, що властивість border задає рамку з усіх боків елемента, тому він буде одягнений в прямокутник, але в даному прикладі нам потрібно лише трохи підкреслити знизу. Для цього ми і записали border-bottom. Відповідно, також є властивості border-left, border-right і border-top.

Ще я говорив вам на початку про подвійний лінії. Вона теж задається властивістю border, потрібно тільки прописати інший тип лінії, а саме:

Тут ключовим словом є double. У властивості є і інші значення, а подивитися ви їх можете в будь-якому нормальному довіднику по CSS.

Отже, для підкреслення пунктиром в css потрібних слів використовуйте властивість властивість border. Перше значення - висота лінії, а друге - її тип, де потрібно прописати dashed.

Вам також може бути цікаво