Вопрос:
Я хочу сделать текст в HTML с двойным подчеркиванием.
<h1><u><i> website </i></u></h1>
У меня две строки внизу вместо одной. Есть ли определенный тег для этого или я должен сделать это в CSS?
Лучший ответ:
Вы можете попробовать добавить это:
h1.dblUnderlined { border-bottom: 3px double; }
Примечание. Ширина должна быть 3px или больше, поскольку она представляет общую ширину; а не ширины каждой границы. По мере увеличения измерения ширина линий и пространства может быть или не быть одинаковой на основе делимости заданного измерения на 3. Остальная часть 1 и 1 добавляется к ширине пространства; остаток от 2 приведет к добавлению 1 к каждой строке.
Ответ №1
Используйте границу и и подчеркните:
.doubleUnderline { text-decoration:underline; border-bottom: 1px solid #000; } <span class=»doubleUnderline»>Test</span>
Здесь рабочая скрипка.
Ответ №2
Самый простой способ – установить нижнюю границу типа 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; } Ответ №3
FYI, на данный момент возможно в Firefox или в Safari с использованием префикса поставщика:
text-decoration: underline double; -webkit-text-decoration: underline double;
См. text-decoration-line.
Ответ №4
ребята /gals, это тоже работает, но больше похоже на традиционное двойное подчеркивание.
.doubleUnderline { text-decoration-line: underline; text-decoration-style: double; } Ответ №5
Почему бы просто не создать свой собственный тег?
<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/
Ответ №6
используйте 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;
Ответ №7
Здесь мое решение (стилус):
$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, упомянутую выше.
Ответ №8<h1 style=»text-decoration: underline double;»><u>About Us</u></h1>
Это сработает, только если вы захотите подчеркнуть это дважды в HTML.
