Исполняемые доки CSS: Подчеркивание

Q: Как подчеркнуть текст в CSS?

Задайте элементу text-decoration: underline;. Для вида линии добавьте text-decoration-color, text-decoration-style, text-decoration-thickness и text-underline-offset.

Q: Как убрать подчеркивание у ссылки?

Задайте text-decoration: none; элементу a. Убедитесь, что ссылки все равно выделяются иначе (цветом плюс подчеркиванием при наведении или фокусе), потому что многие читатели находят ссылки именно по подчеркиванию.

Q: Как изменить цвет подчеркивания?

Используйте text-decoration-color или сокращенную запись: text-decoration: underline #f59e0b;. Без этого линия берет цвет текста.

Q: Как добавить расстояние между текстом и подчеркиванием?

Используйте text-underline-offset, например text-underline-offset: 4px;. Чем больше значение, тем ниже линия под текстом.

Подчеркивание в CSS: text-decoration, цвет, отступ и удаление

Подчеркните текст через text-decoration, а затем управляйте линией: ее цветом, стилем, толщиной и расстоянием от текста. А также как убрать подчеркивание у ссылок и когда этого делать не стоит.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как подчеркнуть текст в CSS

text-decoration: underline рисует линию под текстом. Линия берет цвет текста, если не задать ей свой.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

Вторая строка использует сокращенную запись text-decoration для типа линии, стиля и цвета, а затем задает толщину и отступ отдельными свойствами. Спецификация разрешает указывать толщину и внутри сокращенной записи, но Safari тогда отбрасывает все объявление, поэтому пишите text-decoration-thickness отдельно.

Свойства text-decoration

Свойство	Значения	По умолчанию
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (можно сочетать)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Любой цвет	`currentColor` (цвет текста)
`text-decoration-thickness`	Длина, проценты, `auto`, `from-font`	`auto`
`text-underline-offset`	Длина, проценты, `auto`	`auto`

text-decoration это сокращенная запись для первых четырех, но толщину в нее не включайте: Safari игнорирует объявление text-decoration, в котором она есть. text-underline-offset отдельное свойство, его нужно писать самостоятельно.

Стили, цвета и толщина

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Как сдвинуть подчеркивание: text-underline-offset

По умолчанию линия идет близко к буквам и обходит выносные элементы вроде g, p и y. text-underline-offset опускает ее ниже, и на заголовках и ссылках это часто смотрится аккуратнее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Разрывы вокруг выносных элементов дает text-decoration-skip-ink: auto, включенный по умолчанию. Задайте none для сплошной линии.

Как убрать подчеркивание у ссылок

Ссылки подчеркивает таблица стилей браузера. text-decoration: none убирает подчеркивание. Многие читатели находят ссылки по подчеркиванию, поэтому возвращайте его при наведении и фокусе с клавиатуры и давайте ссылке цвет, отличный от текста:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

В навигационных панелях и кнопках подчеркивание можно убрать, потому что их расположение и так говорит «это ссылка». Внутри абзаца текста его лучше оставить. Подробнее о состояниях ссылок на странице про hover.

Надчеркивание и зачеркивание

text-decoration-line рисует линию и над текстом, и через него, а также принимает несколько значений сразу:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

Зачеркивание через CSS чисто визуальное. Если текст это удаленное содержимое (измененная цена, убранный пункт), размечайте его через <s> или <del>, как показано на странице про подчеркивание в HTML, чтобы смысл был в разметке, а не только в оформлении.

Частые ошибки

<u> для декоративного подчеркивания. <u> нужен для текста, отмеченного как особый, например опечаток. Для оформленного подчеркивания используйте CSS.
Подчеркивание текста, который не является ссылкой. Читатели будут пытаться по нему кликнуть. Для выделения используйте жирный шрифт, цвет или фон.
Удаление подчеркивания ссылок в основном тексте без другой подсказки. Одного цвета мало для читателей, которые не видят разницы.
Попытка убрать подчеркивание родителя из дочернего элемента. Изнутри его не отменить; измените родителя или сделайте дочерний элемент inline-block.
Ожидание text-underline-offset в сокращенной записи. Это отдельное свойство.
Толщина в сокращенной записи. text-decoration: underline 2px работает в Chrome и Firefox, но Safari отбрасывает все объявление. Используйте text-decoration-thickness.

Часто задаваемые вопросы

Как подчеркнуть текст в CSS?

Задайте элементу text-decoration: underline;. Для вида линии добавьте text-decoration-color, text-decoration-style, text-decoration-thickness и text-underline-offset.

Как убрать подчеркивание у ссылки?

Задайте text-decoration: none; элементу a. Убедитесь, что ссылки все равно выделяются иначе (цветом плюс подчеркиванием при наведении или фокусе), потому что многие читатели находят ссылки именно по подчеркиванию.

Как изменить цвет подчеркивания?

Используйте text-decoration-color или сокращенную запись: text-decoration: underline #f59e0b;. Без этого линия берет цвет текста.

Как добавить расстояние между текстом и подчеркиванием?

Используйте text-underline-offset, например text-underline-offset: 4px;. Чем больше значение, тем ниже линия под текстом.

Почему не получается убрать подчеркивание у дочернего элемента?

Подчеркивание, которое рисует родитель, проходит через его дочерние элементы, и изнутри их его не убрать. Уберите его на элементе, который его задает, или сделайте дочерний элемент display: inline-block, до которого оформление родителя не доходит.

Связанные концепции