Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

Добавляем пунктирное подчеркивание тексту HTML без CSS-файла

Быстрый ответ

Для реализации пунктирного подчеркивания используйте CSS-свойство text-decoration-style со значением dotted:

CSS
Скопировать код
.dotted-underline {
  text-decoration: underline;
  text-decoration-style: dotted;
}

Примените этот класс для наделения текста пунктирным подчеркиванием:

HTML
Скопировать код
<span class="dotted-underline">Текст с пунктирным подчеркиванием.</span>

Расширьте функционал с помощью border-bottom для детальной конфигурации:

CSS
Скопировать код
.custom-dotted {
  border-bottom: 1px dotted #000;
  text-decoration: none;
}

Пример собственного пунктирного подчеркивания:

HTML
Скопировать код
<span class="custom-dotted">Собственное пунктирное подчеркивание.</span>
Кинга Идем в IT: пошаговый план для смены профессии

Основы инлайнового стилизования

Вам необходим не отдельный CSS-файл для присвоения стилей. Вы можете использовать встроенные стили или тег <style> внутри <head> для быстрой настройки.

Вот пример инлайнового стиля:

HTML
Скопировать код
<span style="border-bottom: 1px dotted; text-decoration: none;">Инлайновое пунктирное подчеркивание.</span>

Или опишите стиль в <head> для систематичного применения:

HTML
Скопировать код
<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, вы создадите эффект всплывающей подсказки:

HTML
Скопировать код
<abbr title="Hypertext Markup Language" style="border-bottom: 1px dotted; text-decoration: none;">HTML</abbr>

Для обеспечения единого вида в различных браузерах всегда задавайте свой стиль и избегайте использования изображений для подчёркивания — так вы улучшите доступность контента.

Развиваем подчеркивание

Пройдите испытание на цвет и позицию

Добавьте цвета:

CSS
Скопировать код
.colorful-dotted {
  border-bottom: 1px dotted purple;
  text-decoration: none;
}

Настройте расположение:

CSS
Скопировать код
.spacing-dotted {
  text-decoration: underline dotted;
  text-underline-position: under;
}
Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Мир сплошного и волнистого подчеркивания

Для классического подчеркивания:

CSS
Скопировать код
.solid-underline {
  text-decoration: underline solid;
}

Для нестандартного подчеркивания:

CSS
Скопировать код
.wavy-underline {
  text-decoration: underline wavy;
}

Оставайтесь стильным для новичков

Если вы только начинаете путь разработчика, этот обзор CSS поможет освоиться с базовыми понятиями.

Визуализация

Представим текст в примере рубашки:

Markdown
Скопировать код
"Ткань" рубашки: "Привет, Мир!"

Добавляем стиль с помощью text-decoration:

CSS
Скопировать код
text-decoration: underline;
text-decoration-style: dotted;

В итоге получаем стильный результат:

Markdown
Скопировать код
**Ткань** рубашки:
"Привет, Мир!"
👇👇👇👇👇👇👇👇👇

Теперь наш текст элегантно подчеркнут модными точками.

Решение возможных проблем

Отладка проблемы исчезающих точек

Если подчеркивание внезапно исчезает, выполните следующие проверки:

  • Обратите внимание на ширину границы.
  • Проверьте, совместим ли элемент со стилем границы.
  • Отследите конфликтующие CSS-правила.

Творческий контроль с помощью псевдоэлементов

Используйте ::before и ::after для гибкости стилей:

CSS
Скопировать код
.dotted-underline::after {
  content: '';
  border-bottom: 1px dotted;
  position: absolute;
  left: 0; right: 0;
}

Сундук с CSS-сокровищами

Подробности можно найти в CSS Text Decoration Module.

Кроссбраузерная совместимость

Не забывайте проверять внешний вид подчеркивания в различных браузерах. Инструменты, такие как BrowserStack, могут быть весьма полезны.

Адаптивный дизайн

Ваш пунктир должен выглядеть прекрасно на любом устройстве. Используйте относительные величины, например em.

Полезные материалы

  1. text-decoration – CSS: Каскадные таблицы стилей | MDN — Детальное описание свойства CSS text-decoration.
  2. CSS Псевдоэлементы — Разъяснение псевдоэлементов CSS ::before и ::after.
  3. Полное руководство по пользовательским свойствам | CSS-Tricks — Использование пользовательских свойств CSS.
  4. CSS Text Decoration Module Level 4 — Последний черновик W3C по оформлению текста.
  5. 10 CSS-сниппетов для создания потрясающих анимированных эффектов подчеркивания текста — CSS-примеры для создания анимированных подчеркиваний.
  6. Руководство | DigitalOcean — Руководство по свойству CSS Text-Decoration.
  7. text-shadow | CSS-Tricks — Сделайте ваш текст объемным с помощью текстовой тени в CSS.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какое CSS-свойство используется для создания пунктирного подчеркивания?
1 / 5