Enter
    Расширенный поиск
    Клавиша / esc

    CSS

    text-decoration-thickness

    Какой будет толщина декоративной линии под (или над) текстом?

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

    Кратко

    Скопировано

    Свойство text-decoration-thickness управляет толщиной декоративной линии у текста, если она задана свойством text-decoration.

    Пример

    Скопировано

    Для примера создадим три абзаца текста и зададим для них разные значения.

            
          
          <p class="thin">Текст с голубым подчёркиванием в 1px.</p><p class="thick">Текст с голубым подчёркиванием в 3px.</p><p class="shorthand">Текст с голубым подчёркиванием в 5px.</p>
          <p class="thin">Текст с голубым подчёркиванием в 1px.</p>
<p class="thick">Текст с голубым подчёркиванием в 3px.</p>
<p class="shorthand">Текст с голубым подчёркиванием в 5px.</p>

        
        
          
        
      
            
          
          .thin {  text-decoration-line: underline;  text-decoration-style: solid;  text-decoration-color: #2e9aff;  text-decoration-thickness: 1px;}.thick {  text-decoration-line: underline;  text-decoration-style: solid;  text-decoration-color: #2e9aff;  text-decoration-thickness: 3px;}.shorthand {  text-decoration: underline solid #2e9aff 5px;}
          .thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #2e9aff;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #2e9aff;
  text-decoration-thickness: 3px;
}

.shorthand {
  text-decoration: underline solid #2e9aff 5px;
}

    Свойство text-decoration является шорткатом и позволяет указать все значения сразу.

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

    Как пишется

    Скопировано

    Возможные значения:

    • auto — значение по умолчанию, браузер сам определит толщину линии.
    • from-font — если в файле шрифта прописана предпочтительная толщина декоративной линии, то будет использована она. Если нет, то значение будет установлено в auto.
    • Толщина в единицах измерения — можно задать толщину линии во всех доступных единицах измерения.

    Обратите внимание, что толщина в процентах поддерживается не всеми браузерами. Подробнее на Can I use.

    Подсказки

    Скопировано

    💡 Свойство text-decoration-thickness может менять толщину подчёркивания у ссылок (<a>), а также его можно анимировать при помощи transition.

    На практике

    Скопировано

    Ярослав Лебеденко советует

    Скопировано

    🛠 На практике одного text-decoration-thickness может быть не достаточно поэтому стоит обратить внимание на такие свойства как text-decoration-skip-ink и text-underline-offset. Ниже приведён пример совместной работы этих свойств.

            
          
          <nav>  <ul class="nav-list">    <li class="nav-list__item">      <a class="nav-list__link orange" href="#0">HTML</a>    </li>    <li class="nav-list__item">      <a class="nav-list__link blue" href="#0">CSS</a>    </li>    <li class="nav-list__item">      <a class="nav-list__link yellow" href="#0">JavaScript</a>    </li>    <li class="nav-list__item">      <a class="nav-list__link green" href="#0">Веб-платформа</a>    </li>  </ul></nav>
          <nav>
  <ul class="nav-list">
    <li class="nav-list__item">
      <a class="nav-list__link orange" href="#0">HTML</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link blue" href="#0">CSS</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link yellow" href="#0">JavaScript</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link green" href="#0">Веб-платформа</a>
    </li>
  </ul>
</nav>

        
        
          
        
      
            
          
          .nav-list__link {  display: inline-block;  color: #fff;  font-size: 36px;  line-height: 1.3;  padding: 6px 10px;  text-decoration-skip-ink: none;  text-decoration-thickness: 4px;  text-underline-offset: -40px;  transition: 150ms ease-in-out;}.nav-list__link:hover,.nav-list__link:focus {  text-decoration-thickness: 2px;  text-underline-offset: 10px;  text-decoration-color: currentColor;}.orange {  text-decoration-color: #ff852e;}.blue {  text-decoration-color: #2e9aff;}.yellow {  text-decoration-color: #ffd829;}.green {  text-decoration-color: #40e746;}
          .nav-list__link {
  display: inline-block;
  color: #fff;
  font-size: 36px;
  line-height: 1.3;
  padding: 6px 10px;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 4px;
  text-underline-offset: -40px;
  transition: 150ms ease-in-out;
}

.nav-list__link:hover,
.nav-list__link:focus {
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  text-decoration-color: currentColor;
}

.orange {
  text-decoration-color: #ff852e;
}

.blue {
  text-decoration-color: #2e9aff;
}

.yellow {
  text-decoration-color: #ffd829;
}

.green {
  text-decoration-color: #40e746;
}
    Открыть демо в новой вкладке

    О значении currentColor читайте в статье «Цвета в вебе»

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