这是我使用的:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

不，但是你可以使用border-bottom: 1px solid #000和padding-bottom: 3px。

如果你想要与“下划线”(在我的例子中是边框)相同的颜色，你只需省略颜色声明，即border-bottom-width: 1px和border-bottom-style: solid。

对于多行，您可以将多行文本包装在元素内的span中。例如，<a href="#"><span>插入多行文本在这里</span></a>然后添加border-bottom和padding在<span> - Demo

我用什么:

<span style="border-bottom: 1px solid black"> Enter text here </span>

这里有一些很好的解决方案，但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。squarecandy的答案也可以，但有点复杂。使用border-bottom可以改变文本的布局，并将内容移过来。

添加自定义下划线的一种解决方案是使下划线成为背景图像，其大小与文本大小相关。

    a {
        /* Change the source image to account for changes to the text colour. It should be a single column. */
        background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
        /*background-image: url('underlineImage.png');*/
        background-size: 1px 1.1em;
        background-repeat: repeat-x;
        display: inline;
        cursor: pointer;
        text-decoration: none;
    }

随着文本的增加，位置保持相对于文本大小。有了这个，你可以有任何你想要的下划线图像，如“一排星星”，或只是一条线。

上面的示例不包括创建效果所需的完整base64信息。这在所有浏览器上都能很好地工作，因为这是一个基本的东西，并且与旧的浏览器非常兼容。

<a href="#">This _____ is the link</a>

如果背景图片是带有透明度的png格式，那么它在其他元素上的效果会很好。

看我的小提琴。

你需要使用border width属性和padding属性。我添加了一些动画，让它看起来更酷:

身体{ background - color: lightgreen; ｝ 一个{ 文字修饰:没有; 颜色:绿色; 边框样式:固体; 边框宽度:0px 0px 1px 0px; 过渡:所有。2s轻松; ｝ 答:{徘徊 颜色:darkblue; 边框样式:固体; 边框宽度:0px 0px 1px 0px; 填充:2 px; ｝ <a href='#' >某处…在彩虹之上(lalala)</a>，蓝色的鸟儿，飞…(推特推特!)，我想知道(嗯)什么a < I ><a href="#">多么美妙的世界!< / >世界!< / i >

如果你想:

多行 虚线 自定义底部填充 没有包装

下划线，你可以使用1像素高度的背景图像重复x和100% 100%的位置:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

你可以用px或em之类的东西替换第二个100%来调整下划线的垂直位置。如果你想添加垂直填充，你也可以使用calc，例如:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

当然，你也可以用另一种颜色、高度和设计制作你自己的base64 png图案，例如:http://www.patternify.com/ -只需设置正方形宽度和高度为2x1。

灵感来源:http://alistapart.com/article/customunderlines