Двойной тег подчеркивания?

Я хочу сделать текст в HTML с двойным подчеркиванием.

<h1><u><i> website </i></u></h1>

У меня две строки внизу вместо одной. Есть ли определенный тег для этого или я должен сделать это в CSS?

Ответы

Ответ 1

Вы можете попробовать добавить это:

h1.dblUnderlined { border-bottom: 3px double; }

Примечание. Ширина должна быть 3px или больше, поскольку она представляет общую ширину; а не ширины каждой границы. По мере увеличения измерения ширина линий и пространства может быть или не быть одинаковой на основе делимости заданного измерения на 3. Остальная часть 1 и 1 добавляется к ширине пространства; остаток от 2 приведет к добавлению 1 к каждой строке.

Ответ 2

Используйте границу и и подчеркните:

.doubleUnderline {
    text-decoration:underline;
    border-bottom: 1px solid #000;
}

<span class="doubleUnderline">Test</span>

Здесь рабочая скрипка.

Ответ 3

Самый простой способ - установить нижнюю границу типа double в CSS. Он должен иметь ширину не менее 3 пикселей для создания минимальной двойной границы (две границы 1px с интервалом 1px между ними). ​​

Детали зависят от разметки, от требуемой ширины и цвета двойной линии и от того, должна ли она проходить через доступную ширину. Разметка типа <h1><u><i> website </i></u></h1>, вероятно, не должна быть серьезной. С простой разметкой <h1>foobar</h1> способ получить минимальную двойную границу на странице - использовать

h1 {
  border-bottom: double 3px;
}

Если вы хотите иметь только текст заголовка "подчеркнутый", самым простым способом является внутренняя разметка, например <h1><span>foobar</span></h1> и код CSS

h1 span {
  border-bottom: double 3px;
}

Ответ 4

FYI, на данный момент возможно в Firefox или в Safari с использованием префикса поставщика:

text-decoration: underline double;
-webkit-text-decoration: underline double;

См. text-decoration-line.

Ответ 5

ребята /gals, это тоже работает, но больше похоже на традиционное двойное подчеркивание.

.doubleUnderline {
     text-decoration-line: underline;
     text-decoration-style: double;
}

Ответ 6

Почему бы просто не создать свой собственный тег?

<style>
du
{
    text-decoration-line: underline;
    text-decoration-style: double;
}
</style>
<p> I want <du>this stuff</du> double underlined.</p>

http://jsfiddle.net/eoba541g/2/

Ответ 7

используйте http://jsfiddle.net/cKNP4/

или

Дайте следующий стиль для любого контейнера HTML:
border-top-style:none;border-right-style:none;border-bottom-style:double;border-left-style:none;border-width: 2px solid black;

Ответ 8

Здесь мое решение (стилус):

$borderWidth 1px
$textColour black

$double-borders
    &:after
        content ""
        position absolute
        top 100%
        width 5.7em
        right 0
        border-top ($borderWidth * 3) double $textColour

.double-underlined
    @extend $double-borders

Обратите внимание, что ширина должна быть жестко запрограммирована (в данном случае 5.7em). Если это не желаемый результат, вы также можете использовать технику border-bottom, упомянутую выше.

Ответ 9

<h1 style="text-decoration: underline double;"><u>About Us</u></h1>

Это сработает, только если вы захотите подчеркнуть это дважды в HTML.