Двойной тег подчеркивания?
Я хочу сделать текст в 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
или
Дайте следующий стиль для любого контейнера 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.