使用<a> tag for symbols</a>转义下划线

Question

我有一个链接，如下所示。

<a href="blah.com">Name <sup>&reg;</sup> title</a>

一个屏幕，®符号也有上标下划线，看起来不太好。我是否可以仅为®符号删除下划线，并且名称和标题周围仍然包含相同的“a”标记？

Answer 1

您可以完全删除文字装饰，并在其下面放置边框。

a {
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid black;
}

从可用性的角度来看，如果您要在链接下放置下划线以将其表示为链接，则应在整个链接下显示下划线。通过从a元素中删除文本修饰，将其声明为inline-block并在其下面放置边框，即可获得所需的结果，而不会在®下面浮动线条。您还可以通过将边框更改为dotted或dashed，或在鼠标悬停时更改/细化来为您的链接增添趣味。

但是，最重要的部分是您不会因为样式原因而添加无关的标记。

行动中的小提琴：http://jsfiddle.net/gs5jC/

Answer 2

可悲的是，不，至少不是你当前的标记（见example）。这是specification：

  

2.1。文字装饰线：'文字装饰线'属性

     

...

     

指定将哪些线条装饰（如果有）添加到元素中。值具有以下含义：

     

'无'：既不会产生也不会抑制文本修饰。

     

...

但是，您可以稍微更改标记以支持此标记（example）：

<a href="#"><span>Foo</span> <sup>&reg</sup></a>

a {
    text-decoration:none;
}
a span {
    text-decoration:underline;
}