Подчеркивание текста в css: text-decoration-color | htmlbook.ru

Leave a Comment / Css / By /

Подчёркнутый текст (свойство text-decoration) | CSS примеры

Отменить подчёркивание у ссылки

Стиль ссылки CSS 
<style>
.raz {
  text-decoration: none;
  border: none; 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

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

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

Стиль ссылки CSS 
<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

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

Стиль текста CSS 
<style>
. raz {
  text-decoration: underline; 
  text-decoration-style: dashed; 
  cursor: pointer; 
}
</style>

<span>Стиль текста CSS</span>

text-decoration
none underline overline line-through spelling-error grammar-error solid double dotted dashed wavy
initial
none solid currentcolor
inherit
наследует значение родителя
unset
none solid currentcolor

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

<style>
div {
  text-decoration: none;

  

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
</style>

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

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

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

<style>
div {
  text-decoration-line: none;
}
</style>

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

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

Стиль текста CSS 
<style>
. raz {
  text-decoration-line: underline overline;
}
</style>

<span>Стиль текста CSS</span>

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

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

<style>
div {
  text-decoration: underline;
  text-decoration-style: solid;
}
</style>

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

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 не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

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

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства 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
наследует значение родителя

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

<style>
div {
  text-decoration: underline;
  text-decoration-skip: objects leading-spaces trailing-spaces;
}
code {
  display: inline-block;
}
</style>

<div>Свойство <code>text-decoration-skip</code> наследуется, применяется ко всем элементам <img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик">.</div>

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

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

 
<style>
div {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
</style>

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

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

Пример подчёркнутого текста 
<style>
. raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

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

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

Пример подчёркнутого текста 
<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

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

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

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

<style>
div {
  text-decoration: underline;
  text-underline-position: auto;
}
</style>

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

Разница

text-decoration и border
Нижнее подчёркивание, сделанное text-decoration: underline; Нижнее подчёркивание, сделанное border-bottom: 1px solid; 
<table>
  <tr>
    <tdvydelit">text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code>
    <td><spanvydelit">border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span>
</table>

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

Увеличение отступа от линии подчеркивания в css

Вопрос задан

Изменён 8 месяцев назад

Просмотрен 44k раз 

<span>
    <a href="#" >TEXT</a>
</span>
span a  {
    text-decoration: underline;
}

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

С text-decoration: underline; такого не получится сделать. Нужно поставить text-decoration: none; и border-bottom: 1px #цвет_ссылки solid;. Вот хороший совет по теме.

2

В начале подумал что не походит выриант с бордером, так как заголовок может принимать ширину 100%, и тогда бордер ничем не отличается от hr.

прочитав следующий коммент про display:inline-block; помог сделать ширину заголовка, как бы по содержимому, остается только отцентрировать.

Дальше поигравшись и inline-block отставил в сторону, и применил table. Вот что получилось.

display: table;//ширина по тексту в заголовке
border-bottom: 1px solid #8edfce;//само подчеркивание
line-height: 36px;//высота строки, ну и соответственно отступ от подчеркивания

Я сам задался этим вопросом, но нашел такой вариант

.nav_link:hover {
    padding-bottom: 8px;
    border-bottom: 1.2px solid #4d4d4d;
    text-transform: capitalize;
}

Мне нужно было после наведения на ссылку, чтобы появлялось подчеркивание с высотой от строки 8px и шириной в слово. text-decoration: underline; не давал такой возможности, а нижняя граница вуаля))

Я справился с данной задачей следующим образом:

p {
   border-bottom: 1px solid black;
   height: 20px;
  }

Значение height будет определять на каком расстоянии от текста будет подчеркивание. При необходимости также нужно прописать «text-decoration: none», чтобы не получилось две линии подчеркивания.

1

для текста, но не блока использую: text-underline-offset

p {
  font-family: $main-font;
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  color: $accent-color;
  text-decoration: underline;
  text-underline-offset: 10px;
}

На мой взгляд лучше использовать display:inline-block

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство CSS text-decoration-color

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите красный цвет оформления текста:

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

Попробуйте сами »

Определение и использование

Свойство text-decoration-color определяет цвет оформления текста (подчеркивание, надчеркивание, зачеркивание).

Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.

Показать демо ❯

Значение по умолчанию: текущий цвет
Унаследовано: нет
Анимация: да. Читать о анимированном Попробуй
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationColor=»красный» Попробуй

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

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

Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.

Недвижимость
цвет текста-декорации 57,0 79,0 36,0
6,0 -мунц-		 12. 1
7.1 -вебкит-		 44,0

Синтаксис CSS

text-decoration-color: color |initial|inherit;

Значения свойств

Значение Описание Играй
цвет Задает цвет оформления текста Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS: Оформление текста CSS

Ссылка на HTML DOM: свойство textDecorationColor

❮ Предыдущий Полное руководство по CSS Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


1 Top5 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS text-decoration-line

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установка различных типов строк оформления текста:

дива {
  text-decoration-line: overline;
}

дел.б {
  text-decoration-line: подчеркивание;
}

дел.с {
строка оформления текста: сквозная;
}

дел.д {
  text-decoration-line: надчеркивание, подчеркивание;
}

Попробуйте сами »

Определение и использование

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

Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.

Примечание: Вы также можете комбинировать более одного значения, например подчеркивание и надчеркивание, чтобы отображать линии как под текстом, так и над ним.

Показать демо ❯

Значение по умолчанию: нет
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationLine=»overline» Попробуй

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

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

Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.

Собственность
строка оформления текста 57,0 79,0 36,0
6,0 -моз-		 12. 1
7.1 -вебкит-		 44,0

Синтаксис CSS

text-decoration-line: нет|подчеркивание|надчеркивание|сквозь строку|начальный|наследовать;

Значения свойств

Значение Описание Играй
нет Значение по умолчанию. Не указывает строку для оформления текста Демонстрация ❯
подчеркивание Указывает, что строка будет отображаться под текстом Демонстрация ❯
над чертой Указывает, что линия будет отображаться поверх текста Демонстрация ❯
проходной Указывает, что через текст будет отображаться линия Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Оформление текста CSS

Ссылка на HTML DOM: свойство textDecorationLine

❮ Предыдущий Полное руководство по CSS Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9004 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *