Получить профессию в Skypro
Добавляем пунктирное подчеркивание тексту HTML без CSS-файла
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для реализации пунктирного подчеркивания используйте CSS-свойство text-decoration-style со значением dotted:
.dotted-underline {
text-decoration: underline;
text-decoration-style: dotted;
}Примените этот класс для наделения текста пунктирным подчеркиванием:
<span class="dotted-underline">Текст с пунктирным подчеркиванием.</span>Расширьте функционал с помощью border-bottom для детальной конфигурации:
.custom-dotted {
border-bottom: 1px dotted #000;
text-decoration: none;
}Пример собственного пунктирного подчеркивания:
<span class="custom-dotted">Собственное пунктирное подчеркивание.</span>
Основы инлайнового стилизования
Вам необходим не отдельный CSS-файл для присвоения стилей. Вы можете использовать встроенные стили или тег <style> внутри <head> для быстрой настройки.
Вот пример инлайнового стиля:
<span style="border-bottom: 1px dotted; text-decoration: none;">Инлайновое пунктирное подчеркивание.</span>Или опишите стиль в <head> для систематичного применения:
<head>
<style>
.head-dotted {
border-bottom: 1px dotted blue;
text-decoration: none;
}
</style>
</head>
<body>
<p class="head-dotted">Пунктирное подчеркивание, определенное в «head».</p>
</body>Особенности браузеров и хитрые трюки
В Firefox и Opera тег <abbr> имеет пунктирное подчеркивание по умолчанию. Сочетая его с атрибутом title, вы создадите эффект всплывающей подсказки:
<abbr title="Hypertext Markup Language" style="border-bottom: 1px dotted; text-decoration: none;">HTML</abbr>Для обеспечения единого вида в различных браузерах всегда задавайте свой стиль и избегайте использования изображений для подчёркивания — так вы улучшите доступность контента.
Развиваем подчеркивание
Пройдите испытание на цвет и позицию
Добавьте цвета:
.colorful-dotted {
border-bottom: 1px dotted purple;
text-decoration: none;
}Настройте расположение:
.spacing-dotted {
text-decoration: underline dotted;
text-underline-position: under;
}Мир сплошного и волнистого подчеркивания
Для классического подчеркивания:
.solid-underline {
text-decoration: underline solid;
}Для нестандартного подчеркивания:
.wavy-underline {
text-decoration: underline wavy;
}Оставайтесь стильным для новичков
Если вы только начинаете путь разработчика, этот обзор CSS поможет освоиться с базовыми понятиями.
Визуализация
Представим текст в примере рубашки:
"Ткань" рубашки: "Привет, Мир!"Добавляем стиль с помощью text-decoration:
text-decoration: underline;
text-decoration-style: dotted;В итоге получаем стильный результат:
**Ткань** рубашки:
"Привет, Мир!"
👇👇👇👇👇👇👇👇👇Теперь наш текст элегантно подчеркнут модными точками.
Решение возможных проблем
Отладка проблемы исчезающих точек
Если подчеркивание внезапно исчезает, выполните следующие проверки:
- Обратите внимание на ширину границы.
- Проверьте, совместим ли элемент со стилем границы.
- Отследите конфликтующие CSS-правила.
Творческий контроль с помощью псевдоэлементов
Используйте ::before и ::after для гибкости стилей:
.dotted-underline::after {
content: '';
border-bottom: 1px dotted;
position: absolute;
left: 0; right: 0;
}Сундук с CSS-сокровищами
Подробности можно найти в CSS Text Decoration Module.
Кроссбраузерная совместимость
Не забывайте проверять внешний вид подчеркивания в различных браузерах. Инструменты, такие как BrowserStack, могут быть весьма полезны.
Адаптивный дизайн
Ваш пунктир должен выглядеть прекрасно на любом устройстве. Используйте относительные величины, например em.
Полезные материалы
- text-decoration – CSS: Каскадные таблицы стилей | MDN — Детальное описание свойства CSS text-decoration.
- CSS Псевдоэлементы — Разъяснение псевдоэлементов CSS ::before и ::after.
- Полное руководство по пользовательским свойствам | CSS-Tricks — Использование пользовательских свойств CSS.
- CSS Text Decoration Module Level 4 — Последний черновик W3C по оформлению текста.
- 10 CSS-сниппетов для создания потрясающих анимированных эффектов подчеркивания текста — CSS-примеры для создания анимированных подчеркиваний.
- Руководство | DigitalOcean — Руководство по свойству CSS Text-Decoration.
- text-shadow | CSS-Tricks — Сделайте ваш текст объемным с помощью текстовой тени в CSS.