25

我想在 HTML 中为一些文本添加双下划线。

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

我在底部有两条线而不是一条。是否有特定的标签或者我必须在css中做它？

4

9 回答 9

43

您可以尝试添加以下内容：

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

注意：宽度必须3px大于等于总宽度；不是每个边框的宽度。当您增加测量值时，根据定义的测量值被 3 的可分性，线条和空间的宽度可能相等也可能不相等。余数为 1，并且 1 被添加到空间的宽度；余数为 2 将导致每行添加 1。

于 2013-03-26T17:29:36.743 回答
26

使用边框和下划线：

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

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

这是一个工作小提琴。

于 2013-03-26T17:29:05.157 回答
4

double最简单的方法是在 CSS中设置 type 的底部边框。它需要至少 3 像素宽才能创建最小的双边框（两个 1 像素的边框，它们之间的间距为 1 像素）。

细节取决于标记、双线的所需宽度和颜色，以及它是否应该跨越可用宽度。像这样的标记<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;
}
于 2013-03-26T18:33:53.610 回答
3

伙计们/姑娘们，这也可以，但更像是传统的双下划线。

.doubleUnderline {
     text-decoration-line: underline;
     text-decoration-style: double;
}
于 2018-10-09T13:48:39.017 回答
2

仅供参考，目前，在 Firefox 或 Safari 中可以使用供应商前缀进行以下操作：

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

见text-decoration-line。

于 2015-03-30T18:16:46.600 回答
2

为什么不制作自己的“标签”？

<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/

于 2018-09-12T10:21:54.950 回答
0

使用以下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;

于 2014-02-03T14:26:23.637 回答
0

这是我的解决方案（手写笔）：

$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上面提到的技术。

于 2014-09-19T20:39:14.553 回答
-1 
<h1 style="text-decoration: underline double;"><u>About Us</u></h1>

仅当您想在 HTML 中添加双下划线时，这才有效。

于 2019-10-17T09:21:43.337 回答