Css текст подчеркнуть: Подчеркивание в CSS (красивые эффекты с примерами кода)

Вопрос: Как подчеркнуть текст в HTML? — Компьютеры и электроника

Содержание статьи:

CSS фича #11 ➤ Подчеркивание ссылок | Links undeline before

Видео взято с канала: Glo Academy

Перечеркнутый текст и подчеркнутый текст в HTML. #19

Показать описание

Хостинг, который использую я. При переходе по ссылке вы сможете получить бесплатный хостинг на два месяца и домен в подарок: http://bit.ly/2B3SHkD.
Дополнительные материалы (бесплатные и платные) для ВидеоКурса здесь: http://sdelaemblog.ru/instrumenty-i-shpargalki/videokurs-html/.
Видеокурс HTML. Видео Урок 19.Перечеркнутый текст и подчеркнутый текст в HTML..
Этот видео урок посвящен двум тегам форматирования текста, del и ins, которые помогут выделить текст, который был удален в новой версии документа. А второй HTML-тег поможет выделить добавленный текст в новую версию HTML-документа..
Мы будем использовать:
тег del необходим для указания текста, который был удален в старой версии HTML-документа..
тег ins отмечает текст, который был добавлен в новую версию документа..
Все видео здесь: http://sdelaemblog.ru/category/html-css/videokurs-html/.
Вы можете поддержать проект, с помощью комментариев или лайков, за каждый отдельное спасибо..
Мой видео курс за смешные деньги: https://sdelaemblog.ru/moi-kursy/videokurs-vkontakte#sale.
Мой HTML-справочник, который поможет а работе, почти даром: https://sdelaemblog.ru/moi-kursy/videokurs-vkontakte#sale.
Материальная поддержка проекта:
Яндекс Деньги: 410011398844657.
WebMoney: R042342968957

Видео взято с канала: SdelaemBlog

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

Видео взято с канала: Marketello — маркетолог прокачайся

Как поставить нижнее подчеркивание на клавиатуре.Нижнее подчеркивание на клавиатуре

Видео взято с канала: ПК для ВСЕХ

Как в HTML сделать выравнивание текста по центру | Уроки HTML, CSS

Показать описание

Сейчас Вы увидите, что выровнять текст это очень просто..
Выравнивание текста очень популярная задача, которую постоянно решают фронтэнд разработчики и дизайнеры html страниц..
Когда вы начинаете размещать любой текст на вашей странице, то всегда возникает желание, то выровнять его по левому краю, то выровнять по правому краю, то растянуть на ширину страницы..
Итак, первый способ – это указание атрибута align со значением как выровнять текст. Вот пример для выравнивания по центру:
[p align=”center”]Выравнивание этого текста по центру.[/p].
Значения атрибута могут быть следующими: justify – выравнивание текста по ширине страницы; right – по правому краю; left — по левому..
И это применимо для тегов h2, h3, h4, h5, h5, h6 и контейнера div..
Второй способ это использование стилей, все выглядеть будет также. Для этого назначаем стиль тегу [p] через указание атрибуту style значения равного text-align с установленным значением выравнивания..
Если по простому – то в стиле элемента прописываем свойство text-align со значением как выравнивать его содержимое. Пример ниже:
[p style=”text-align:center;”]Здесь какой-то наш супер текст [/p].
Третий вариант – используют для сокращения написания кода, т.е. многократного дублирования стилей по разным элементам. Используют классы стилей – но не надо пугаться этого названия, оно просто означает набор определенных вами стилей..
Делается это еще проще, чем второй вариант. В тегах [head][/head] прописывается теги стиля страницы [style][/style], и уже в них определяется класс стилей. Само название класса идет с точкой, а в фигурных скобках указывается перечисление стилей, как во втором варианте..
Пример ниже, класс имеет название my_1 и он присваивается элементу через атрибут class, в котором и указывается название класса:
[p class=”my_1″]Наш текст 23[/p].
+ Размещаете в тегах [head][/head] это определение стилей для класса my_1:
[style].
.my_1 {text-align: center;}.
[/style].
Полный пример:
[!DOCTYPE html].
[html lang=”en”].
[head].
[meta charset=”UTF-8″].
[title]Выравнивание[/title].
[style].
.my_1 {text-align: center;}.
[/style].
[/head].
[body].
[p align=”right”]Наш текст[/p].
[p style=”text-align: center;”]Наш текст 2[/p].
[p class=”my_1″]Наш текст 23[/p].
[p class=”my_1″]Наш текст 24[/p].
[/body].
[/html].
*** Внимание: Угловые скобки в описании нельзя разместить поэтому вместо них использованы квадратные [ ]!!! ***.
#html #текст #выравнивание #центр #Трёхгорка #Одинцово #дизайн #design.
Подписывайтесь на наш канал в YouTube: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ.
Вступайте в нашу группу ВК: https://vk.com/wiseplat.
Задавайте вопросы – постараюсь ответить .
Удачи в таких классных начинаниях!

Видео взято с канала: Изучаем мир ИТ / Олег Шпагин / WISEPLAT

Подчеркивание текста в Ворде

Видео взято с канала: officeprogs.ru

html теги для форматирования текста. html5 работа с текстом. HTML5 для начинающих. Урок#5

Видео взято с канала: #SimpleCode

css — Как подчеркнуть весь текст в упорядоченном списке при наведении курсора на элемент

Я использую scss, и мне нужно подчеркнуть весь текст (число и текст) при наведении курсора на элемент li

Это пример, но номер еще не подчеркнут

https://jsfiddle.net/viking_123/9hgjyo05/1/

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

SCSS

 ol li {
   cursor:pointer;
   &:hover {
     text-decoration: underline;
   }
 }

Спасибо

0

Victor

3 Сен 2020 в 13:25

2 ответа

Лучший ответ

Вы можете добавить list-style-position: inside; в элемент <ol>. https://www.w3schools.com/css/css_list.asp

 ol {
   /* Add this to style*/
   list-style-position: inside;

   li {
     cursor:pointer;

     &:hover {
       text-decoration: underline;
     }
   }

 }

Вот рабочая скрипка.

ПРИМЕЧАНИЕ. Спасибо @Rayees AC за то, что узнали об этом. Этот подход работает по-разному в браузерах Mozilla Firefox, потому что по какой-то причине text-decoration не применяется к ::markers (также известный как маркеры списка). Если вам нужна поддержка других браузеров, попробуйте вместо этого подход @Rayees AC.

0

Blackraspberryyy
3 Сен 2020 в 12:25

Пожалуйста, попробуйте это вместо этого,

jsfiddle Demo

Добавьте list-style-position:inside; и display:inline-block; в <ol>.

Также добавьте border-bottom к <li>

SCSS

ol{
   list-style-position:inside;
   display:inline-block;
 }
ol li {
   cursor:pointer;
   border-bottom:2px solid transparent;
   &:hover {
     border-bottom:2px solid #111;
   }
 }

Рабочая демонстрация

ol{
   list-style-position:inside;
   display:inline-block;
}

ol li {
   cursor:pointer;
   border-bottom:2px solid transparent;
   float: left;
   clear: left;
}

ol li:hover {
   border-bottom:2px solid #111;
 }

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

1

Rayees AC
3 Сен 2020 в 11:17

Как подчеркнуть строку в тексте : Радиосхема.ру

Подчеркивание для блочных элементов вроде тега

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Подчеркивание заголовка

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

I. В чём проблема

Если социальная сеть, платформа для блогов или форум предоставляют возможность размечать текст при помощи HTML или BBCode, перечёркивать или подчёркивать текст не составляет труда: можно пользоваться тегами s и u обеих разметок или назначать стили в HTML. Но что делать, если у нас есть только голый текст? Или, например, нам нужно зачеркнуть/подчеркнуть слово в заголовке страницы, отображаемом в заголовке вкладки или всего браузера, или оформить слово в заголовке форумного поста — короче говоря, всюду, где не работает разметка?

Можно рискнуть и воспользоваться средствами Юникода.

II. Нужные символы

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

1. Зачёркивание. Символ Юникода под номером U+0336 (в десятеричной нотации 822). В статье по ссылке можно увидеть и другие, более экзотические виды зачёркивания с соответствующими символами, но нам пока хватит и такого, тем более что он наиболее симулирует эффект привычных тегов. Если вставить по такому символу после каждого знака в тексте, ?в?ы?г?л?я?д?е?т?ь? ?э?т?о? ?б?у?д?е?т? ?в?о?т? ?т?а?к? ? (для пущей убедительности лучше прихватывать дополнительные обрамляющие пробелы).

2. Пунктирное подчёркивание. Символ Юникода под номером U+0331 (в десятеричной нотации 817). Подчёркнутый им текст в?ы?г?л?я?д?и?т? ?в?о?т? ?т?а?к?.

3. Почти сплошное подчёркивание. Символ Юникода под номером U+0332 (в десятеричной нотации 818). Подчёркнутый им текст в?ы?г?л?я?д?и?т? ?в?о?т? ?т?а?к?.

III. Как вводить вручную

Некоторые способы перечислены в этой статье. Обратите внимание на упомянутый там ключ реестра. Судя по моему опыту, в разных приложениях работают разные способы: в одних работал шестнадцатеричный метод, в других десятеричный. Потестируйте сами после редактирования реестра и перезагрузки. Вот нужные нам три кода (в случае шестнадцатеричных кодов первый плюс означает одновременное нажатие, второй — собственно плюс на цифровой клавиатуре; начальный ноль, судя по тестам, можно набирать или пропускать по вкусу):

1. Зачёркивание: Alt + +(0)336 или Alt + (0)822
2. Пунктирное подчёркивание: Alt + +(0)331 или Alt + (0)817
3. Почти сплошное подчёркивание: Alt + +(0)332 или Alt + (0)818

Если вы пользуетесь утилитами вроде Punto Switcher или продвинутыми редакторами, можно настроить автозамену легко вводимого сочетания на нужный символ.

IV. Сетевые сервисы автоматизации

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

V. Букмарклеты

Впрочем, пользоваться для такой простой вещи целым сайтом не очень удобно. На помощь могут прийти кросбраузерные букмарклеты. Я попробовал написать два типа: простой, но с более широкой поддержкой браузеров, и посложнее, для последних версий браузеров.

1. Оформление всего текста в любом активном текстовом поле

Достаточно совсем простого кода (он работает даже в IE8):

Можете сохранить букмарклеты cо следующим кодом у себя в закладках или избранном (в Firefox работает простое перетаскивание кода букмарклета в закладки, потом только отображаемое название хорошо бы подправить; в других браузерах, возможно, придётся вставлять код в свойства любой готовой или заново создаваемой закладки):

Подчеркнуть всё пунктиром:

Подчеркнуть всё почти сплошной линией:

2. Оформление выделенного текста в любом активном текстовом поле

Код усложняется, потому что мы пытаемся оформить только выделенный участок, восстановить точку фокуса и позицию прокрутки (тестировалось только в последнем Firefox, но по идее должно работать и в других браузерах последних версий):

Можете сохранить букмарклеты cо следующим кодом у себя в закладках:

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

Подчеркнуть выделенное почти сплошной линией:

VI. Подводные камни

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

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

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

3. Некоторые версии браузеров вообще отказываются видеть в этих символах нужные знаки Юникода. Возможны глюки как на стадии создания первоначального текста, так и при перепостах и цитировании.

В общем, будьте осторожны, тестируйте и проверяйте.

Буду благодарен за дополнения и исправления.

Введите текст в первое поле и во втором автоматически получите результат.

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

Существуют многочисленные инструкции по работе с текстом. Но отсутствуют причины ими руководствоваться, когда гораздо проще в одном поле написать нужные слова, во втором получить их подчеркнутыми. Далее вам остается лишь скопировать полученный результат. Подчеркивание текста в Инстаграме, ВКонтакте, Фейсбук, мессенджерах Ватсап и Телеграм 100% работает.

В каких случаях используют подчеркивание слов в постах?

В первую очередь, это украшение поста. Особенно если речь идет о довольно большой информации, которую воспринимать рядовому пользователю сложнее, чем несколько предложений. Так, например, подчеркнуть текст в ВК онлайн можно в следующих случаях:

• Когда вы хотите донести до аудитории много важной информации, в которой нужно выделить конкретный посыл. Выделение происходит с помощью подчеркивания, так как оно привлекает и заостряет внимание пользователей на конкретных словах, словосочетаниях, предложениях;
• Если ваш пост небольшой, все равно подобная опция часто необходима. Обычный небольшой текст пользователь может просто пролистать. А даже одно подчеркнутое слово, которое несет ключевое значение в посте, способно привлечь внимание;
• В конце концов, все сводится к тому, чтобы донести до пользователей максимально важные моменты из общей информации. Подчеркиванием вы как бы подталкиваете пользователей к знакомству с наиболее ключевыми моментами в контенте.

Любой контент, которым вы хотите поделиться с аудиторией, требует работы с текстом. Подчеркивание ключевых данных — это также работа с информацией. Обычный активный пользователь социальных сетей и мессенджеров ежедневно сталкивается с большим количество статей, информационных постов и т. д. Поэтому зачастую «проходит мимо» интересных для него знаний, так как их не замечает. Подчеркивание останавливает пользователя от быстрого листания ленты. И такой метод работает не первый год.

Теперь вам известно, как сделать подчеркнутый текст в Ватсап, других мессенджерах и социальных сетях — элементарная задача благодаря нашему сервису!

Подчеркнуть содержимое ячеек, целые ячейки или строки на

Существует несколько способов, которые можно добавить к данным на лист. Вы можете подчеркнуть весь или выбранный текст в ячейках, применить нижнюю границу к ячейкам или строкам или нарисовать линию для подчеркнутых ячеек.

Подчеркнуть все или только выбранное содержимое ячейки

1. Выполните одно из следующих действий:

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

   • Чтобы подчеркнуть только часть содержимого ячейки, дважды щелкните ее и выберем текст или числа, которые нужно подчеркнуть.

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

2. На вкладке Главная в группе Шрифт сделайте следующее:

   • Чтобы применить один подчеркнутую линию, нажмите кнопку Подчеркнуть .

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

Использование нижней границы для подчеркнутия ячеек или строк целиком

1. Вы выберите ячейку, диапазон или строки, которые нужно подчеркнуть. Дополнительные сведения см. в статье Выбор ячеек, диапазонов,строк или столбцов\n на\n.

2. На вкладке Главная в группе Шрифт щелкните стрелку рядом с кнопкой Нижняя граница , а затем выберите нижний стиль границы на палитре.

Нарисуйте линию для подчеркнутых ячеек

1. На вкладке Вставка в группе элементов Иллюстрации нажмите кнопку Фигуры.

2. В области Линиивыберите .

3. Перетащите, чтобы нарисовать линию под ячейками, которые нужно подчеркнуть.

   Чтобы нарисовать совершенно прямую линию, перетащите ее, удерживая на удержании shift.

4. Чтобы изменить форматирование линии, щелкните ее.

   Отобразит вкладку Средства рисованияи добавит вкладку Формат.

5. На вкладке Формат в группе Стили фигур выберите нужные параметры форматирования.

Дополнительные сведения

Вы всегда можете задать вопрос специалисту Excel Tech Community или попросить помощи в сообществе Answers community.

text-underline-offset — CSS: Cascading Style Sheets

Свойство CSS text-underline-offset устанавливает расстояние смещения линии оформления подчеркивания текста (примененной с использованием text-decoration ) от исходного положения.

text-underline-offset не является частью сокращения text-decoration . В то время как элемент может иметь несколько text-decoration lines, text-underline-offset влияет только на подчеркивание, а не , другие возможные варианты оформления строки, такие как overline или line-through .

 
смещение подчеркивания текста: авто;


смещение подчеркивания текста: 0.1em;
смещение подчеркивания текста: 3 пикселя;


смещение подчеркивания текста: 20%;


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

Свойство text-underline-offset указано как одно значение из списка ниже.

Значения

авто

Браузер выбирает соответствующее смещение для подчеркивания.

<длина>

Задает смещение подчеркивания как <длина> , отменяя предложенный файл шрифта и настройки браузера по умолчанию. Рекомендуется использовать единицы em , чтобы смещение масштабировалось с размером шрифта.

<процент>

Задает смещение подчеркивания как <процент> из 1 em в шрифте элемента.Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Для данного применения этого свойства смещение является постоянным по всему блоку, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или вертикальным выравниванием.

Демонстрация смещения текста-подчеркивания

  
 Вот текст со смещенным волнистым красным подчеркиванием! 


 Этот текст имеет строки как над, так и под ним.Смещен только нижний. 
  

  п {
  текст-украшение: подчеркивание волнистым красным цветом;
  смещение подчеркивания текста: 1em;
}

.twolines {
  цвет оформления текста: фиолетовый;
  текст-украшение-строка: подчеркивание над чертой;
}
  

Таблицы BCD загружаются только в браузере

Подчеркнутый текст · Документы WebPlatform

Сводка

Не поддерживается.

Свойство подчеркивания текста является сокращением для стиля подчеркивания текста, ширины подчеркивания текста, цвета подчеркивания текста, режима подчеркивания текста и положения подчеркивания текста. ‘.

Обзорная таблица

Начальное значение

не определено для сокращенных свойств

Относится к

все элементы с текстовым содержимым, включая сгенерированный контент

Унаследовано

Нет

Медиа

визуальный

Расчетное значение

указанное значение (кроме начального и наследуемого)

Анимационный

Нет

Свойство объектной модели CSS

НЕТ

процентов

Н / Д

Синтаксис

• подчеркивание текста: цвет подчеркивания текста
• подчеркивание текста: режим подчеркивания текста
• подчеркивание текста: положение подчеркивания текста
• подчеркивание текста: стиль подчеркивания текста

Значения

стиль подчеркивания текста

Это свойство определяет стиль линии для подчеркивания.

Возможные значения: none / solid / double / dotted / dashed / dot-dash / dot-dot-dash / wave

цвет подчеркивания текста

Это свойство определяет цвет линии подчеркивания.

режим подчеркивания текста

Это свойство устанавливает режим подчеркивания, определяющий, влияет ли оформление текста на символы пробела или нет. «Пробелы» — это все символы, классифицируемые стандартом Unicode [UNICODE] как категория «Z», в дополнение к символам пробела.

Возможные значения: continuous / skip-white-space

текст-подчеркивание-позиция

Это свойство устанавливает положение подчеркивания. Он может отображаться «до» (вверху в горизонтальном потоке) или после (внизу в горизонтальном потоке) текста по отношению к его базовой ориентации. Это свойство обычно используется в контексте вертикального письма, где может быть желательно, чтобы подчеркивание появлялось «перед» запуском текста. Это приводит к тому, что подчеркивание появляется справа от вертикального столбца письма.

Возможные значения: auto / before-edge / alphabetic / after-edge

Примеры

Посмотреть живой пример

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

  Подчеркнутый текст свойства не поддерживается ни одним из перечисленных новых браузеров (Chrome / FF / Opera / IE10).
  

Вместо используйте оформление текста: подчеркните .

Возможное исключение: text-underline-position : / css / properties / text-underline-position.

Банкноты

Свойство «text-decoration» имеет ограничения, проистекающие из его синтаксиса, что исключает точный контроль над каждым из этих эффектов форматирования.В частности, он не предлагает возможности управлять цветом или стилем линии подчеркивания, надчеркивания или сквозной линии. CSS3 расширяет модель, вводя новые свойства, позволяющие дополнительный контроль над этими эффектами форматирования. CSS3 также позволяет включать и отключать эти эффекты форматирования, не влияя на другие параметры «оформления текста».

См. Также

Статьи по теме

CSS Шрифт

Смещение подчеркивания текста — CSS — W3cubDocs

Свойство CSS text-underline-offset устанавливает расстояние смещения линии оформления подчеркнутого текста (примененной с использованием text-decoration ) от ее исходного положения.

text-underline-offset не является частью сокращения text-decoration . В то время как элемент может иметь несколько text-decoration lines, text-underline-offset влияет только на подчеркивание, а не , другие возможные варианты оформления строки, такие как overline или line-through .

Синтаксис

 / * Одно ключевое слово * /
смещение подчеркивания текста: авто;

/* длина */
смещение подчеркивания текста: 0.1em;
смещение подчеркивания текста: 3 пикселя;

/ * процент * /
смещение подчеркивания текста: 20%;

/ * Глобальные значения * /
текст-подчеркивание-смещение: наследовать;
текст-подчеркивание-смещение: начальный;
текст-подчеркивание-смещение: не задано;
 

Свойство text-underline-offset указано как одно значение из списка ниже.

Значения

авто

Браузер выбирает соответствующее смещение для подчеркивания.

<длина>

Задает смещение подчеркивания как <длина> , отменяя предложенный файл шрифта и настройки браузера по умолчанию. Рекомендуется использовать единицы em , чтобы смещение масштабировалось с размером шрифта.

<процент>

Задает смещение подчеркивания как <процент> из 1 em в шрифте элемента.Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Для данного применения этого свойства смещение является постоянным по всему блоку, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или вертикальным выравниванием.

Формальное определение

Формальный синтаксис

 auto | <длина> |  

Примеры

Демонстрация смещения текста-подчеркивания

 
 Вот текст со смещенным волнистым красным подчеркиванием! 


 Этот текст имеет строки как над, так и под ним.Смещен только нижний. 
 

 p {
  текст-украшение: подчеркивание волнистым красным цветом;
  смещение подчеркивания текста: 1em;
}

.twolines {
  цвет оформления текста: фиолетовый;
  текст-украшение-строка: подчеркивание над чертой;
} 

Технические характеристики

См. Также

CSS подчеркивание текста. В общем веб-дизайне больше всего… | by Kolosek

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

Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылки больше не нужно подчеркивать, а строка под текстом сегодня — это не просто идентификация ссылки. Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.

Перво-наперво — если вам нужно быстрое, простое, регулярное подчеркивание, всегда есть HTML-элемент для него . Он собирается сделать строку в цвет текста на позиции по умолчанию из текста.Фактически, элемент просто добавляет текст-украшение: подчеркивание текста с помощью встроенного в браузер CSS.

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

Есть два основных варианта добавления строки под текстом с помощью CSS.
Первое — это свойство text-decoration , которое определяет украшение, добавленное к тексту. Возможные значения для этого свойства: подчеркивания, над чертой и через строку.Свойство text-decoration должно быть сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, но это пока плохо поддерживается. На данный момент у нас есть текстовое оформление, и с его помощью мы можем добавить строку под, поверх или сквозь текст, с text-decoration-color мы можем раскрасить эту строку и с text-decoration-style , мы можем сделать это двойной, пунктирный, штриховой или волнистый.

Второе решение — своего рода взлом, подразумевающее использование border-bottom .Свойство display в этом случае должно быть inline . С помощью этого решения мы можем контролировать положение линии с помощью свойства padding-bottom , толщины линии с border-bottom-width , стиля с border-bottom-style и цвета с border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта. Этот вариант предлагает больше параметров и переменных, но его сложнее использовать.

Сделать точечно-волнистое подчеркивание еще невозможно. В ожидании 🙁

Оформление линии: подчеркивание, надчеркнутый и зачеркнутый

Css пример смещения текста с подчеркиванием | Newbedev

Свойство CSS text-underline-offset устанавливает расстояние смещения линии оформления подчеркивания текста (примененной с использованием text-decoration ) от ее исходного положения.

text-underline-offset не является частью сокращения text-decoration . В то время как элемент может иметь несколько text-decoration lines, text-underline-offset влияет только на подчеркивание, а не , другие возможные варианты оформления строки, такие как overline или line-through .

Синтаксис

смещение подчеркивания текста: авто;


смещение подчеркивания текста: 0.1em;
смещение подчеркивания текста: 3 пикселя;


смещение подчеркивания текста: 20%;


текст-подчеркивание-смещение: наследовать;
текст-подчеркивание-смещение: начальный;
текст-подчеркивание-смещение: не задано;
 

Свойство text-underline-offset указано как одно значение из списка ниже.

Значения

авто

Браузер выбирает соответствующее смещение для подчеркивания.

<длина>

Задает смещение подчеркивания как <длина> , отменяя предложенный файл шрифта и настройки браузера по умолчанию. Рекомендуется использовать единицы em , чтобы смещение масштабировалось с размером шрифта.

<процент>

Задает смещение подчеркивания как <процент> из 1 em в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта.Для данного применения этого свойства смещение является постоянным по всему блоку, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или вертикальным выравниванием.

Формальное определение

Формальный синтаксис

 авто | <длина> | <процент> 

Примеры

Демонстрация смещения текста, подчеркивания

 
 Вот текст со смещенной волнистой красной линией подчеркивания! 


 Этот текст имеет строки как над, так и под ним.Смещен только нижний. 
 

 p {
  текст-украшение: подчеркивание волнистым красным цветом;
  смещение подчеркивания текста: 1em;
}

.twolines {
  цвет оформления текста: фиолетовый;
  текст-украшение-строка: подчеркивание над чертой;
} 

Технические характеристики

Совместимость с браузером

См. Также

обновлений CSS — Новые свойства для стилизации текстовых украшений и подчеркиваний (ВИДЕО)

Примеры использования этого видео

• Узнайте о новых свойствах CSS, связанных с оформлением текста и подчеркиванием.
• Знайте о «толщине-текст-украшения», «цвет-украшения-текста» и других связанных свойствах CSS для оформления текста.

Новые свойства CSS, такие как «text-decoration-Thickness», «text-decoration-color» и т. Д., Могут помочь в создании привлекательных украшений и подчеркиваний текста, что было невозможно раньше.

Новые свойства CSS были введены для стилизации подчеркивания на веб-страницах. Это может помочь в разработке текстовых украшений, которые раньше были невозможны.

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

Но теперь все должно измениться! Для изменения цвета подчеркивания есть свойство text-decoration-color. Затем есть свойство text-decoration-Thickness, которое может изменять толщину подчеркивания.

Полный набор новых свойств CSS, связанных с оформлением текста, которые представлены (или будут):

• текст-украшение-толщина
• текст-украшение-цвет
• текст-украшение-строка
• стиль оформления текста
• текст-украшение-пропустить
• текст-украшение-пропустить-чернила
• оформление текста
• смещение подчеркивания текста
• позиция подчеркивания текста

Видео ниже от Mozilla дает хорошее представление о некоторых из этих свойств CSS.Они объясняются в демонстрациях, поэтому эффекты этих свойств можно увидеть в действии.

Полезные ресурсы

.