Редагуйте товщину рядка атрибута CSS "підкреслення"

Оскільки ви можете підкреслити будь-який текст у CSS так:

H4 {text-decoration: underline;}

Як ви можете потім редагувати намальовану "лінію", колір, який ви отримуєте на лінії, легко вказати як "color: red", але як можна редагувати висоту лінії, тобто товщину?

Ось один із способів досягнення цього:

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 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-товщини тексту-прикраси задає товщину чи ширину лінії прикраси, яка використовується в тексті в елементі, такому як проріз, підкреслення чи накладання.

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%;
}

Ви можете налаштувати положення підкреслення за значенням висоти лінії, товщиною підкреслення та стилем у нижній частині рамки.

Не забудьте відключити поведінку підкреслення за замовчуванням, якщо ви хочете підкреслити href.