html - 如何仅在带有缩进的 2 行超链接上为文本加下划线

Question

我正在创建一个包含多个链接的侧边栏菜单，其中许多链接需要根据面板的标题长度和宽度要求跨越 2 行。该设计包含一个“>>”作为文本元素符号，因此第 2 行缩进。我需要在悬停时为超链接添加下划线，但只有文本部分，而不是 >> 或第二行的空格。我已经尝试了很多在网上找到的解决方案，这是我得到的最接近的解决方案:

http://jsfiddle.net/FbDGL/

这是 HTML:

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
<a href="neuropsychological-assessment.htm">
<font color="#00457C">Neuropsychological Assessment</font></a></b><br>
</font>
<font color="#00457C" face="Lucida Sans Unicode" size="2">
» <a href="adhd.htm">Attention Deficit Hyperactivity<br>
<span class="space">&nbsp;&nbsp; </span>Disorder</a><br>

这是 CSS:

a:link {text-decoration: none;
color:#00457C;
}
a:visited {text-decoration: none;
color:#00457C;
}
a:hover {text-decoration: underline}
a:hover .space {text-decoration: none}
a:active {text-decoration: none}

它适用于 IE，但不适用于 Chrome、Firefox 或 Safari。第二行的空格在这些浏览器中悬停时仍显示下划线。任何人都可以向我提供适用于所有浏览器的代码以实现此目的吗？

Answer 1

如果不需要手动添加换行符，可以设置悬挂缩进。链接不会加下划线。

按如下方式更改您的 html:

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
        <a href="neuropsychological-assessment.htm">
        <font color="#00457C">Neuropsychological Assessment</font></a></b><br>
        </font>
    <div class='div_for_length'>
        <font color="#00457C" face="Lucida Sans Unicode" size="2">
            <div class='link'>»
            <a href="adhd.htm">Attention Deficit Hyperactivity Disorder</a></div>
            </div>

然后在您的 CSS 规则中添加这些:

.div_for_length {
    width: 250px; /* or whatever your needs are */
}

.link {
    display: block;
    float: left;
    text-indent: -1em;
    padding-left: 1em;
}

附带说明，如果您使用 CSS，则应避免使用 <font>标签。这些应该用 CSS 规则来表达。