Есть ли способ сделать HTML подчеркивание толще?

Question

У меня есть центрированный div с вложенным h1 внутри. Есть ли способ подчеркнуть его более толстой линией, чем HTML по умолчанию?

Answer 1

Это даст вам контроль над подчеркиванием тега U:

<style type="text/css">
  u {
    text-decoration: none;
    border-bottom: 4px solid black;
  }
</style>

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

Answer 2

Нет, нет.Толщина подчеркивания зависит от браузера и не может быть затронута в CSS (или HTML).

Когда-то было предложено свойство text-underline-width в проекте текста CSS3.Но интерес к нему был недостаточным, и он был удален из проекта в 2005 году. Вероятно, он никогда не был реализован.

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

Следующий пример демонстрирует различия.

<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>

Answer 3

Я не рекомендую встроенный CSS, но использовал его здесь для краткости:

<h1 style="border-bottom: 5px solid black">

Answer 4

Поскольку вы не всегда хотите, чтобы границы снизу (например, элемент мог иметь отступ, и он будет отображаться слишком далеко), этот метод работает лучше всего:

h1:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

Если вы хотите более толстое подчеркивание, добавьте еще height

Если вы хотите больше или меньше места между текстом и подчеркиванием, добавьте margin-top:

h1:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

Answer 5

Вы можете достичь того же визуального эффекта с помощью border-bottom-width;

h2
{
  border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:15px;
}d