Подчеркивание в css: Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration — журнал «Доктайп»

Как сделать подчёркивание заголовка? | Рецепты

Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.

Использование text-decoration

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h3>.

Пример 1. Использование text-decoration

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

Использование border-bottom

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Рис. 2. Вид линии, созданной с помощью border-bottom

Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.

Пример 2. Использование border-bottom

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.

Использование ::after и content

Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after. Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.

Рис. 3. Линия, созданная через ::after

Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).

Пример 3. Использование ::after

Линии и рамки

См. также

• border-bottom
• text-decoration
• text-decoration-color
• Аккордеон меню
• Добавление тени
• Начертание
• Не только текст
• Оформление ссылок
• Подробнее о позиционировании
• Псевдоэлемент ::after
• Псевдоэлементы ::after и ::before
• Точки между слов

text-decoration-skip-ink ⚡️ HTML и CSS с примерами кода

Свойство text-decoration-skip-ink определяет способ рисования надстрочных и нижних подчеркиваний при прохождении над верхними и нижними элементами глифов.

Демо

• hanging-punctuation
• hyphens
• letter-spacing
• line-break
• overflow-wrap
• paint-order
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-break
• word-spacing

• letter-spacing
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip
• text-decoration-skip-ink
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-rendering
• text-shadow
• text-underline-position
• text-transform
• white-space
• word-spacing

Синтаксис

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
/* Global keywords */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

Значения

none

Подчеркивания и надчеркивания рисуются по всей длине текстового содержимого, включая части, которые пересекают нижние и верхние элементы глифов.

auto

Браузер может прерывать подчеркивание и наложение, чтобы они не касались глифа и не приближались к нему. То есть они прерываются там, где в противном случае они пересекали бы глиф.

all

Браузер должен прерывать подчеркивание и подчеркивание, чтобы они не касались глифа и не приближались к нему. Это может быть полезно с некоторыми китайскими, японскими или корейскими (CJK) шрифтами, где автоматическое поведение может не создавать прерываний.

Определение

Поддержка браузерами

Примеры

Пример 1

Пример 2

CSSHTMLРезультат

p {
  font-size: 1.
 
 5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}
.no-skip-ink {
  text-decoration-skip-ink: none;
}
.skip-ink-all {
  text-decoration-skip-ink: all;
}

<p>You should go on a quest for a cup of coffee.</p>
<p>Or maybe you'd prefer some tea?</p>
<p>
  この文は、 text-decoration-skip-ink: auto
  の使用例を示しています。
</p>
<p>
  この文は、 text-decoration-skip-ink: all
  の使用例を示しています。
</p>

См. также

• Элемент a — текст ссылки
• Элемент u — подчеркнутый текст

Ссылки

• Свойство text-decoration-skip-ink ^{MDN (рус.)}
• CSS Text Decoration Module Level 4 ^{Спецификация (eng.)}

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

Элементы подчеркивания — это распространенный инструмент форматирования, используемый для улучшения общей эстетики и удобочитаемости веб-страницы или статьи.

💡

Чтобы подчеркнуть текст в CSS, вам нужно установить для свойства «text-decoration» значение «underline».

Процесс довольно прост, и мы добавили несколько советов о других функциях подчеркивания, таких как надчеркивание и двойная линия, а также предоставили некоторые решения для распространенных ошибок.

Начнем!

Важное сообщение: мы гордимся тем, что являемся аффилированными лицами некоторых инструментов, упомянутых в этом руководстве. Если вы нажмете на партнерскую ссылку и впоследствии совершите покупку, мы получим небольшую комиссию без каких-либо дополнительных затрат для вас (вы ничего не платите дополнительно). Для получения дополнительной информации ознакомьтесь с раскрытием информации об аффилированных лицах.

Как подчеркивать другой текст в CSS

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

 p {
оформление текста: подчеркивание;
} 

Все элементов ‘p’ в вашем HTML-документе теперь будут подчеркнуты.

💡

Чтобы использовать этот стиль форматирования для других элементов, просто замените «p» на имя элемента.

Например, если вы хотите подчеркнуть все заголовки h3

 h3 {
оформление текста: подчеркивание;
} 

Достаточно просто, правда? ✔️

Вот другие общих стилей , которые вы обычно найдете подчеркнутыми:

Подчеркнуть все ссылки в документе

 a {
оформление текста: подчеркивание;
} 

Подчеркнуть определенный элемент с классом

 . underline {
оформление текста: подчеркивание;
} 

Подчеркните определенный элемент с помощью «специального» идентификатора

 #special {
оформление текста: подчеркивание;
} 

Использовать двойное подчеркивание

 p {
нижняя граница: 1 пиксель сплошной красный;
ширина нижней границы: 2px;
} 

Как удалить подчеркивание из элементов

Удалить подчеркивание из текста или ссылки также очень просто. Просто установите для свойства text-decoration значение

 a {
  текстовое оформление: нет;
}
 

Подчеркивание в CSS Распространенные ошибки и решения

Если вы пробовали описанные выше методы, а функция подчеркивания не отображается в вашем тексте, попробуйте одно из следующих быстрых исправлений .

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

Конфликты родительского и дочернего элементов : Если вы используете text-decoration: подчеркните на родительском элементе, это может быть переопределено text-decoration : нет 9Правило 0026 для дочернего элемента.

Несовместимый браузер : Некоторые старые браузеры несовместимы со свойством оформления текста.

Неверный синтаксис : Убедитесь, что код CSS правильный, с правильным синтаксисом, орфографией и учетом регистра, так как это влияет на вывод.

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

Могу ли я подчеркнуть только определенную часть текста?
Да, вам просто нужно поместить эту часть текста в отдельный элемент HTML и применить стиль подчеркивания.

 
Это текст, и эта часть должна быть подчеркнута.
 

 .подчеркнуть {
  оформление текста: подчеркивание;
}
 

Как по-другому подчеркнуть текст в CSS?
Вы можете использовать свойство text-decoration с разными значениями, например. зачеркнутый или сквозной.

 украшение текста: надчеркивание; 

Можно ли изменить цвет подчеркивания?
Да, вы можете использовать свойство border-bottom для изменения цвета.

 р {
  нижняя граница: 1 пиксель сплошной красный;
}
 

Как сделать толстое подчеркивание в CSS?
Используйте свойство границы, чтобы сделать подчеркивание толще.

 нижняя граница: сплошная толстая;
 

Надеемся, эта статья была вам полезна!

Хотите узнать больше? Посмотрите этот курс CSS🙌

Ссылка скопирована!

css — Управление положением подчеркивания в оформлении текста: подчеркивание

спросил 11 лет, 1 месяц назад

Изменено 29 дней назад

Просмотрено 109 тысяч раз

Есть ли способ управлять положением подчеркивания в text-decoration: underline?

 Пример ссылки
 

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

• css
• подчеркивание

2020

Использовать text-underline-offset !

2012

Единственный способ сделать это — использовать границу вместо подчеркивания. Подчеркивания общеизвестно негибки.

 а {
    нижняя граница: 1px сплошной currentColor; /* Или любой другой цвет */
    текстовое оформление: нет;
}
 

Вот демо. Если этого места недостаточно, вы можете легко добавить больше — если слишком много, это немного менее удобно.

6

 р {
  высота строки: 1,6;
}
.подчеркнуть {
   текстовое оформление: нет;
   положение: родственник;
 }
. подчеркивание: после {
    положение: абсолютное;
    высота: 1 пиксель;
    поле: 0 авто;
    содержание: '';
    слева: 0;
    справа: 0;
    ширина: 90%;
    цвет: #000;
    цвет фона: красный;
    слева: 0;
    внизу: -3px; /* настроить это для перемещения вверх и вниз. вам, возможно, придется отрегулировать высоту строки абзаца, если вы сильно сместите его вниз. */
}
 

 
Это пример текста. На этой странице вы можете прочитать дополнительный текст или посетить книжный магазин, чтобы прочитать пример текста позже.
 

 p {
  оформление текста: подчеркивание;
  цвет оформления текста: красный;
  нижняя граница: 1.5em;
}
р.тест {
  положение: родственник;
}
p.test::после {
  положение: абсолютное;
  содержание: '';
  дисплей: блок;
  высота: 1 пиксель;
  ширина: 100%;
  фон: синий;
  внизу: 0;
} 

 

  Если вы видите наше красное подчеркивание под синей линией, это свойство работает в вашем браузере.


  А теперь давайте попробуем это с `text-underline-offset`, установленным на `auto`.


  С `text-underline-offset`, установленным в `from-font`, это, вероятно, выглядит так же, как и выше. 
 

 <тело>
   

     
<а href="#"
       >
      Моя ссылка
     

 a{
    нижняя граница: 1px сплошная #000;
    отступ снизу: 2px;
}
 

 text-decoration: none;
ширина нижней границы: 1px;
нижняя граница: сплошная;
отступ снизу: 1px;