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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Для реализации пунктирного подчеркивания используйте 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;
}

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

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

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.

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

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.

Свежие материалы

Работа с массивами в C

30 августа 2024

Работа с полями структур в C

30 августа 2024

Разработка консольных приложений на C

30 августа 2024