Question

我想在html中用双下划线标出一些文字。我想做

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

底部有两条线而不是一条。是否有某个标签或者我必须在css中执行此操作？

Answer 1

您可以尝试添加此内容：

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

注意：宽度必须为3px或更大，因为它代表总宽度;不是每个边框的宽度。当您增加测量值时，线条和空间的宽度可能会或者可能不相等，这取决于定义的测量值的可分性为3.剩余的1和1加到空间的宽度上;剩下的2将导致每行添加1。

Answer 2

使用边框和并加下划线：

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

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

这是a working fiddle。

Answer 3

最简单的方法是在CSS中设置double类型的底部边框。它需要至少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;
}

Answer 4

仅供参考，目前，Firefox或使用供应商前缀的Safari可以实现以下功能：

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

请参阅text-decoration-line。

Answer 5

伙计们/加尔斯人，也可以，但更像是传统的双下划线。

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

Answer 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;

Answer 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技术。

Answer 8

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

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

Answer 9

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

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

双下划线标记

9 个答案:

使用以下http://jsfiddle.net/cKNP4/

或