Изменить толщину линии атрибута подчеркивания CSS

Поскольку вы можете подчеркивать любой текст в CSS следующим образом:

H4 {text-decoration: underline;}

Как вы можете затем отредактировать эту нарисованную «линию», цвет, который вы получаете на линии, легко определяется как «цвет: красный», но как изменить высоту линии, то есть толщину?

Вот один из способов добиться этого:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Вот пример: http://jsfiddle.net/AQ9rL/

Недавно мне пришлось иметь дело с FF, в котором подчеркивание было слишком толстым и слишком далеко от текста в FF, и я нашел лучший способ справиться с этим, используя пару теней:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

Первая тень помещается поверх второй, и именно так вы можете управлять второй, изменяя значение «px» для обоих.

Плюс: разные цвета, толщина и положение подчеркивания

Минус: нельзя использовать на несплошном фоне

Здесь я привел пару примеров: http://jsfiddle.net/xsL6rktx/

Очень просто ... вне элемента "span" с мелким шрифтом и подчеркиванием, а внутри элемента "font" с большим размером шрифта.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Другой способ сделать это - использовать ": after" (псевдоэлемент) на элементе, который вы хотите подчеркнуть.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

В text-decoration-thicknessнастоящее время существует часть модуля оформления текста CSS уровня 4 . Он находится на стадии «Редакционный черновик», так что работа над ним продолжается и может быть изменена. По состоянию на январь 2020 года он поддерживается только в Firefox и Safari .

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

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (только Firefox)

Также есть text-decoration-color, который является частью модуля оформления текста CSS уровня 3 . Это более зрелый вариант (кандидат в рекомендацию) и поддерживается в большинстве основных браузеров (за исключением Edge и IE). Конечно, его нельзя использовать для изменения толщины линии, но можно использовать для достижения более «приглушенного» подчеркивания (также показано в коде).

Я сделаю что-нибудь простое, например:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• Вы можете использовать line-heightили, padding-bottomчтобы установить положение между ними
• Вы можете использовать display: inlineв некоторых случаях

Демо: http://jsfiddle.net/5580pqe8/

background-imageТакже может быть использован для создания подчеркивания.

Его нужно сдвинуть вниз background-positionи повторить горизонтально. Ширину линии можно до некоторой степени отрегулировать с помощью background-size(фон ограничен рамкой содержимого элемента).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

Окончательное решение: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Благодаря волшебству новых опций css это теперь возможно изначально:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

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

Мое решение: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

Вы можете настроить положение подчеркивания с помощью значения line-height, толщины и стиля подчеркивания с помощью border-bottom.

Остерегайтесь отключать поведение подчеркивания по умолчанию, если вы хотите подчеркнуть href.