Css text decoration margin

Как подчеркнуть текст прямой, пунктирной, волнистой линией или, наоборот, убрать подчёркивание

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).

Ссылка подчёркивается при наведении

Пунктирное подчёркивание

  Стиль текста CSS

text-decoration

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

text-decoration-line

none убрать от текста линии underline подчеркнуть текст (снизу) overline провести линию над текстом (сверху) line-through зачеркнуть текст (посередине) spelling-error оформить как при орфографической ошибке (не поддерживается браузерами) grammar-error оформить как при грамматической ошибке (не поддерживается браузерами) initial none inherit наследует значение родителя unset none

  
Свойство text-decoration-line не наследуется, применяется ко всем элементам

Сделать линию над и под текстом

  Стиль текста CSS

text-decoration-style

solid одинарная прямая линия double двойная прямая линия dotted линия точками dashed прерывистая пунктирная линия wavy волнистая линия initial solid inherit наследует значение родителя unset solid

  
Свойство text-decoration-style не наследуется, применяется ко всем элементам

text-decoration-color

currentcolor цвет черты что у текста transparent черта полностью прозрачная (невидимая) red цвет черты ключевым словом #ff0000 или #ff0000ff цвет черты в формате HEX rgb(255,0,0) или rgba(255,0,0,1) цвет черты в формате RGB или RGBA hsl(0,100%,50%) или hsla(0,100%,50%,1) цвет черты в формате HSL() или HSLA() initial currentcolor inherit наследует значение родителя unset currentcolor

  
Свойство text-decoration-color не наследуется, применяется ко всем элементам

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.

text-decoration-skip

objects черта пропускает картинки и inline-block-элементы none черта ничего не пропускает spaces черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing leading-spaces trailing-spaces edges черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией box-decoration черта видна, если задана родителю, и пропускает области, созданные margin , padding и border initial objects leading-spaces trailing-spaces inherit наследует значение родителя unset наследует значение родителя

 div < text-decoration: underline; text-decoration-skip: objects leading-spaces trailing-spaces; > code 
Свойство text-decoration-skip наследуется, применяется ко всем элементам  .

text-decoration-skip-ink

auto черта пропускает выступающие части символов (например, «хвостики» у букв «р» и «у») none черта не пропускает выступающие части символов (например, «хвостики» у букв «р» и «у») initial auto inherit наследует значение родителя unset наследует значение родителя

  
Свойство text-decoration-skip-ink наследуется, применяется ко всем элементам

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome

  Пример подчёркнутого текста

Подчёркивание без пропусков выносных частей символов в Safari

  Пример подчёркнутого текста

text-underline-position

auto автоматически (положение черты близко к базовой линии) under черта достаточно отдалена от базовой линии, чтобы не пересекать выступающие части символов left right initial auto inherit наследует значение родителя unset наследует значение родителя

  
Свойство text-underline-position наследуется (применяется ко всем элементам)

Разница text-decoration и border

  text-decoration: underline;">Нижнее подчёркивание, сделанное text-decoration: underline;border-bottom: 1px solid;">Нижнее подчёркивание, сделанное border-bottom: 1px solid;

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line , text-decoration-style и text-decoration-color .

Fedor Timofeev Я видел еще интересное решение при подчеркивании ссылки. При наведении курсора линия подчеркивания появлялась и от середины слова/фразы начинала как бы убегать налево и направо в пределах ссылки, образуя подчеркивание. Вы можете такое реализовать? Здесь не буду пиарить сторонний ресурс. Кто хочет посмотреть пишите. Здесь особенно понравилось волнистое подчеркивание. Однозначно буду применять. А то уже почти решил отказаться от Вашей рассылки. NMitra Нижнее подчёркивание, сделанное с помощью background для inline-элемента

 .raz < display: inline-block; /* для длинных ссылок, которые размещаются на нескольких строчках */ position: relative; margin: 3px; /* отступ от ссылки, особенно актуально для адаптированных под сенсорные устройства сайтов, где нажать по коротким рядомстоящим ссылкам проблематично */ padding: 3px; padding: 3px; text-decoration: none; > .raz:active < /* вид активной ссылки */ background: #ccc; color: #fff; > .raz::after, .raz::before < /* появляющаяся при наведении рамка */ content: ""; position: absolute; /* выравнять по центру */ left: 0; right: 0; top: 0; bottom: 0; z-index: -1; margin: auto; border-style: solid; border-color: #808991; > .raz::before < height: 0; border-width: 0 1px; >.raz::after < width: 0; border-width: 1px 0; >.raz:hover::before < height: 100%; transition: .7s; >.raz:hover::after Для блочного или inline-block-элемента лучше делать областью с помощью border

Источник

Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration

В HTML есть несколько тегов, которые помогают обратить внимание на текст — подчеркнуть, выделить его или акцентировать на чём-то внимание. У таких тегов есть стили по умолчанию, и к некоторым из них мы давно привыкли.

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

Но с помощью text-decoration текст можно даже подчеркнуть сверху (что? да!). Давайте разберёмся, как это сделать.

Свойство text-decoration

• line-through — зачёркивание посередине текста;
• overline — надчёркивание, над текстом;
• underline — подчёркивание, под текстом;
• none — не используется декор;
• inherit — наследуется.

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

text-decoration — это сокращённая форма записи для набора CSS-свойств text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness . Перечисленные свойства используются для более тонкой настройки параметров подчёркивания.

text-decoration-line

text-decoration-line — отвечает за тип линии: подчёркнуто, перечёркнуто, без подчёркивания, подчёркивание над текстом, а не под ним.

text-decoration-line: underline; /* обычное подчёркивание */ 

text-decoration-line: line-through; /* текст перечёркнут */ 

text-decoration-line: overline; /* подчёркивание над текстом */ 

text-decoration-line может принимать сразу несколько значений, например, text-decoration-line: underline line-through; . В этом случае у текста будет подчёркивание и зачёркивание.

text-decoration-color

text-decoration-color управляет цветом подчёркивания. По умолчанию он, то есть цвет подчёркивания, совпадает с цветом текста.

 .red-line 
Красная пунктирная линия
 

text-decoration-style

Стиль линии (сплошная, волнистая, точками, тире и другие) настраивается через CSS-свойство text-decoration-style .

• solid — обычная сплошная линия;
• double — двойная линия;
• dotted — пунктирная линия (пунктир из точек);
• dashed — тоже пунктирная линия, но пунктир из коротких линий;
• wavy — волнистая линия.

text-decoration-thickness

text-decoration-thickness задаёт толщину линии.

text-decoration-thickness: 5px; 

text-underline-offset

До недавнего времени внешним видом подчёркивания управляли только эти четыре CSS-свойства ( text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness ). Но были ситуации, когда перечисленных свойств было недостаточно. К примеру, нужно реализовать выделение активного пункта меню на сайте:

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

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

У свойства text-underline-offset хорошая браузерная поддержка, оно работает в большинстве современных браузеров, кроме Firefox под Android.

🔥 Как работать в Фигме Инструкция для начинающих.

Как узнать параметры нестандартного подчёркивания

Все параметры для подчёркивания будем доставать из макета в Figma.

Нам нужны два параметра — расстояние от текста до линии и толщина линии. Цвет подчёркивания обычно совпадает с цветом текста, поэтому специально искать этот параметр обычно не нужно.

Расстояние от текста до линии

Чтобы измерить расстояние между объектами, достаточно выбрать первый объект, нажать Alt/Option и навести на второй. Выделяем текстовый слой и с зажатой клавишей Alt/Option наводим курсор мыши на линию подчёркивания. В тултипе оранжевого цвета выводится количество пикселей между текстом и объектом, на который навели. В нашем случае — это значение 20 .

Запишем это значение в CSS-свойство text-underline-offset :

.active color: #ffffff; text-decoration: underline; /* Смещаем подчёркивание на 20 пикселей вниз */ text-underline-offset: 20px; > 

Толщина линии подчеркивания

Выделим объект с подчёркиванием. После этого на панели справа, на вкладке Inspect найдём свойства объекта. Нас интересует свойство Height (высота).

Свойство отображается и в разделе Properties, и в разделе Code. В примере толщина подчёркивания — 4 пикселя. Напомним, в CSS толщиной подчёркивания управляет свойство text-decoration-thickness . Допишем в правило определение толщины подчёркивания:

А теперь давайте сравним с помощью расширения Perfect Pixel макет и полученную вёрстку.

Это произошло из-за того, что по умолчанию отступ отсчитывается от базовой линии текста, а Фигма показывает расстояние от нижней границы текстового блока.

💡 Базовая линия — эта линия на которой буквы «стоят». Она проходит по самому нижнему краю букв c плоской нижней частью.

Способов решить задачу (имеется в виду попасть в макет) несколько.

1. Обновить границы слоя, чтобы они соответствовали базовой линии. Этот способ измерения предлагает сама Фигма в документации. В Фигме есть возможность текстовому блоку задать Fixed Size.

Но у этого способа есть минус. Если изменится размер шрифта, либо поменяется содержимое текстового блока, ломается раскладка макета. Это разрушительный для макета способ. Придётся высоту блоку заново устанавливать. Куда удобнее оставить автоматическую высоту для него.

1. Использовать новое CSS-свойство text-underline-position со значением under . В этом случае базовая «нулевая» позиция будет установлена не по базовой линии, а по нижней границе блока, и text-underline-offset будет отсчитываться от того же базового положения, что и в редакторе Figma.

На этом всё — пробуйте, экспериментируйте и изучайте вёрстку, а мы вам в этом поможем.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник