/ ↲
    Расширенный поиск

    CSS

    text-decoration

    Добавляем любому тексту чёрточку. Или убираем, где она есть, но не нужна.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Свойство text-decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

    text-decoration: underline часто встречается при работе со ссылками.

    Пример

    Скопировано

    Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text-decoration.

            
          
          <div class="parent">  <p class="none">Диакритические знаки...</p>  <p class="underline">В типографике...</p>  <p class="line-through">Диакритическими знаками не могут...</p>  <p class="overline">Черта сверху — типографический знак...</p></div>
          <div class="parent">
  <p class="none">Диакритические знаки...</p>
  <p class="underline">В типографике...</p>
  <p class="line-through">Диакритическими знаками не могут...</p>
  <p class="overline">Черта сверху — типографический знак...</p>
</div>

        
        
          
        
      
            
          
          .none {  /* Значение по умолчанию, ничего не меняется */  text-decoration: none;}.underline {  /* Нижнее подчёркивание */  text-decoration: underline;}.line-through {  /* Перечёркнутый текст */  text-decoration: line-through;}.overline {  /* Линия над текстом */  text-decoration: overline;}
          .none {
  /* Значение по умолчанию, ничего не меняется */
  text-decoration: none;
}

.underline {
  /* Нижнее подчёркивание */
  text-decoration: underline;
}

.line-through {
  /* Перечёркнутый текст */
  text-decoration: line-through;
}

.overline {
  /* Линия над текстом */
  text-decoration: overline;
}
    Открыть демо в новой вкладке

    Как понять

    Скопировано

    По факту свойство text-decoration является шорткатом и позволяет указать значения для свойств:

    Но, как правило, его используют только для указания положения линии.

    Как пишется

    Скопировано

    Положение линии

    Скопировано

    Пишем свойство text-decoration и после двоеточия указываем одно из доступных значений:

    • underline — подчёркнутый текст.
    • line-through — перечёркнутый текст.
    • overline — надчёркнутый текст, линия находится над словами.
    • none — отменяет все эффекты.

    Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.

    Стиль линии

    Скопировано

    Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

    Для управления стилем линии используются следующие ключевые слова:

    • solid — сплошная линия. Значение по умолчанию.
    • double — двойная линия.
    • dotted — точечная линия.
    • dashed — пунктирная линия.
    • wavy — волнистая линия.

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

    Как будет выглядеть двойное перечёркивание:

            
          
          p {  text-decoration: line-through double;}
          p {
  text-decoration: line-through double;
}

    Стиль линии можно указать отдельно при помощи свойства text-decoration-style.

    Открыть демо в новой вкладке

    Цвет линии

    Скопировано

    Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text-decoration.

    Мы можем изменить это значение, указав после ключевых слов типа и стиля линии код цвета в любом доступном в вебе формате.

    Например, сделаем двойное подчёркивание красного цвета:

            
          
          p {  text-decoration: underline double #ff0000;}
          p {
  text-decoration: underline double #ff0000;
}

    Цветом линии можно управлять отдельно при помощи свойства text-decoration-color:

    Открыть демо в новой вкладке

    Подсказки

    Скопировано

    💡 Свойство не наследуется.

    💡 Значение по умолчанию для обычного текста — none. Но для ссылок (<a>) значение по умолчанию — underline.

    💡 Свойство text-decoration целиком нельзя анимировать при помощи свойства transition 😒

    Но можно анимировать цвет линии!

    Пусть по умолчанию цвет линий будет совпадать с цветом текста, а по наведению курсора цвет будет меняться на другой за 0.3 секунды.

            
          
          <p class="none">К диакритикам...</p><p class="underline">Дополнение подчёркивается...</p><p class="line-through">Эпанортозис...</p><p class="overline">В большинстве языков...</p>
          <p class="none">К диакритикам...</p>
<p class="underline">Дополнение подчёркивается...</p>
<p class="line-through">Эпанортозис...</p>
<p class="overline">В большинстве языков...</p>

        
        
          
        
      
            
          
          p {  transition: text-decoration-color 0.3s;}.none {  text-decoration: none;}.underline {  text-decoration: underline;}.line-through {  text-decoration: line-through;}.overline {  text-decoration: overline;}.dotted {  text-decoration-style: dotted;}.double {  text-decoration-style: double;}.wavy {  text-decoration-style: wavy;}.blue:hover {  text-decoration-color: #1a5ad7;}.red:hover {  text-decoration-color: #ed6742;}.green:hover {  text-decoration-color: #49a16c;}
          p {
  transition: text-decoration-color 0.3s;
}

.none {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

.dotted {
  text-decoration-style: dotted;
}

.double {
  text-decoration-style: double;
}

.wavy {
  text-decoration-style: wavy;
}

.blue:hover {
  text-decoration-color: #1a5ad7;
}

.red:hover {
  text-decoration-color: #ed6742;
}

.green:hover {
  text-decoration-color: #49a16c;
}

    Открыть демо в новой вкладке

    💡 Нельзя управлять толщиной и точным положением линии, заданной при помощи text-decoration.

    💡 Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы ::before или ::after.

    На практике

    Скопировано

    Егор Левченко советует

    Скопировано

    🛠 Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line-height. Чем больше высота строки, тем ниже будет полоса подчёркивания.

    К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text-decoration и используем border-bottom или логический аналог border-block-end.

            
          
          <header>  <div class="container top">    <nav>      <ul class="navigation">        <li class="navigation__item">          <a href="#" class="navigation__link">О магазине</a>        </li>        <li class="navigation__item">          <a href="#" class="navigation__link">О тыквах</a>        </li>        <li class="navigation__item">          <a href="#" class="navigation__link">О нас</a>        </li>        <li class="navigation__item">          <a href="#" class="navigation__link">Контакты</a>        </li>      </ul>    </nav>  </div>  <div class="container">    <h1>Магазин «Резная тыква»</h1>  </div></header>
          <header>
  <div class="container top">
    <nav>
      <ul class="navigation">
        <li class="navigation__item">
          <a href="#" class="navigation__link">О магазине</a>
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link">О тыквах</a>
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link">О нас</a>
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link">Контакты</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="container">
    <h1>Магазин «Резная тыква»</h1>
  </div>
</header>

        
        
          
        
      
            
          
          .navigation__link, .navigation__link:visited {  /* делаем элементы строчно-блочными */  display: inline-block;  /* убираем подчёркивание */  text-decoration: none;}.navigation__link:hover {  /* нивелируем размеры рамки */  padding-bottom: 20px;  /* добавляем рамку снизу */  border-bottom: 4px solid currentColor;}
          .navigation__link, .navigation__link:visited {
  /* делаем элементы строчно-блочными */
  display: inline-block;
  /* убираем подчёркивание */
  text-decoration: none;
}

.navigation__link:hover {
  /* нивелируем размеры рамки */
  padding-bottom: 20px;
  /* добавляем рамку снизу */
  border-bottom: 4px solid currentColor;
}
    Открыть демо в новой вкладке

    Алёна Батицкая советует

    Скопировано

    🛠 У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text-decoration: none. Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

    🛠 Отдельные свойства — text-decoration-line, text-decoration-style и text-decoration-color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.

    Читайте также

    • text-transform

      Превращаем текст из маленьких букв в текст из БОЛЬШИХ букв.

    • text-shadow

      Создайте эффект объёмного текста.