CSS 文字装饰：下划线与边框底部

text-decoration: underline vs border-bottom

提问by Jitendra Vyas

What is the difference to use {text-decoration: underline}and {border-bottom: ...}?

使用{text-decoration: underline}和 有{border-bottom: ...}什么区别？

which is easy to style and cross browser compatible?

哪个易于样式化和跨浏览器兼容？

when we should use border-bottomover text-decoration: underline?

我们什么时候应该使用border-bottomover text-decoration: underline？

Would it be good to use border-bottomalways in place of text-decoration: underline?

border-bottom总是代替使用会text-decoration: underline好吗？

回答by Ignacio Vazquez-Abrams

border-bottomputs a line at the bottom of the element box. text-decoration:underlinerenders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.

border-bottom在元素框的底部放一条线。text-decoration:underline呈现带下划线的文本。确切的区别取决于所使用的 HTML 和文本布局引擎，但一般来说，如果您希望文本加下划线，那么就给它加下划线。

回答by Matthew

Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.

很抱歉这么说，但这里的一些答案具有误导性。由于内联块的性质，拆分一行文本不会将边框置于整个块的底部。链接下的边框实际上在浏览器中比 text-decoration: underline 更一致。

See: Text-Decoration vs. Border-Bottom

请参阅： 文本装饰与边框底部

回答by ZombieSheep

As Ignacio said, border-bottomwill put the line at the bottom of the containing box, whereas text-decoration:underlinewill actually underline the text. This becomes an important distinction for multi-line strings.

正如伊格纳西奥所说，border-bottom将把该行放在包含框的底部，而text-decoration:underline实际上会在文本下划线。这成为多行字符串的一个重要区别。

I am a single line and will look similar for both methods
---------------------------------------------------------

would probably render the same for both styles, but you'll get the following for multi-line strings.

可能会为两种样式呈现相同的效果，但是对于多行字符串，您将获得以下内容。

I am a string that has been
split and added a border-bottom
-------------------------------

I am a string that has been
---------------------------
split and underlined
--------------------

Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.

对于使用代码格式而不是正确渲染这些示例表示歉意，但您可以看到我试图提出的观点。

回答by pixeltocode

bottom-borderlets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).

bottom-border让你控制文本和下划线之间的距离，所以它更通用。并且（如上所述）它允许为下划线使用不同的颜色（尽管我看不出您为什么要这样做的原因）。

text-decorationis more 'correct' because it is the 'real' CSS property meant for underlining text.

text-decoration更“正确”，因为它是用于给文本加下划线的“真实”CSS 属性。

if you set text-decoration: underlinefor all links then you will have to set text-decoration: nonefor special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: nonein your reset CSS.

如果text-decoration: underline为所有链接设置，则必须为text-decoration: none不需要下划线的特殊链接设置。但是如果您改用 border-bottom，您将保存一行 CSS 代码（前提是您text-decoration: none在重置 CSS 中设置。

so all in all, i'll vote for border-bottomif you have a complex layout with different styles for each link but text-decorationfor a simple website coded 'by the book'.

总而言之，border-bottom如果你有一个复杂的布局，每个链接都有不同的样式，但text-decoration对于一个“按书本”编码的简单网站，我会投票支持。

回答by David Meister

setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.

将文本设置为内联显示（实际上，默认情况下应该是这样）将导致边框底部呈现为文本装饰规则。

however, i presume that you want to use this technique on links by doing the following:

但是，我假设您想通过执行以下操作在链接上使用此技术：

/* my super eye catching dual colour link */
a {
  color:black;
  border-bottom:1px solid red;
}

which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.

这一切都很好，但是您会发现，只要链接中有 img 标签，图像下方就会有一个红色边框。

if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.

如果您能找到一种使用现有选择器而不使用 javascript 来定位页面元素（图像）的父元素的方法，我会给您买一杯啤酒，但我认为您不会有太多运气。

using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.

使用“文本装饰”完全避免了这个问题，因为图像显然不是文本，它不会在链接内呈现下划线。

if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.

如果您可以完全控制您的标记，我想您可以通过向每个链接添加类来完成自己的工作，但是如果您使用任何流行的 CMS 系统，您将难以接受这个想法。

回答by Phabio76

Try this border with 1px image

试试这个带有 1px 图像的边框

a:hover {
    background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
    background-color: transparent;
    background-image: url("img/bg-link-hover.png");
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0px 92%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

回答by AdamJ

While there are always going to be cases where one is more appropriate than the other, border-bottomoffers much more precise control over text-decorationand is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottomcan control/enable that text-decorationcannot:

虽然总有一种情况比另一种更合适，但border-bottom可以提供更精确的控制text-decoration，因此可能是首选方法。这是border-bottom可以控制/启用但text-decoration不能：

1. Spacing between text and "underline"
2. "Underline" style (dotted, dashed, solid, gradient, image)
3. Thickness
4. CSS transitions/animations
5. Separation of color between text and "underline"

1. 文本和“下划线”之间的间距
2. “下划线”样式（点、虚线、实线、渐变、图像）
3. 厚度
4. CSS 过渡/动画
5. 文本和“下划线”之间的颜色分离

In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottomprimarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.

在许多情况下，这些能力中的大部分都不是必需的——但拥有它们是件好事！我已经改用border-bottom主要是为了在文本和下划线之间放置几个像素的填充；我发现的下一个最常见的用途是将下划线颜色与文本颜色分开。

With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:

随着 CSS 变量现在在每个主要浏览器中提供，“重置”样式表可能看起来像这样：

:root {
    --link-color: blue;
    --hover-color: purple;
    --underline-color: var(--link-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid var(--underline-color);
}

a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

This way, links will display as expected on a "default" basis, yet still allow for customization as needed.

这样，链接将在“默认”基础上按预期显示，但仍允许根据需要进行自定义。