我的朋友Jermayn最近写了一篇关于包含多个单词的URL最佳实践的文章（更新：现已下线）。这让我想到，可以使用CSS和简单的标签轻松实现这一点。
假设您有一个包含三个单词的URL，如下所示
www.badgerfootballforums.com
这些单词有点连在一起，基本的可读性有待改进。您可以尝试以下方法
www.BadgerFootballForums.com
但这并没有好多少，并且会强化URL区分大小写的观念，当然，在顶级域名中它们是不区分大小写的。
如何使用**颜色**分割URL中的单词？请查看
www.badgerfootballforums.com
我认为效果很好，并且可以通过少量CSS轻松实现。
a span {
color: #971212;
}然后，在HTML中的锚链接中，只需将要着色的单词用span标签包裹起来，如下所示
<a href="#">www.badger<span>football</span>forums.com</a>为了进一步扩展这个概念，鼠标悬停时颜色如何反转？如下所示
只需在CSS中执行以下操作
a {
color: black;
}
a span {
color: #971212;
}
a:hover {
color: #971212;
}
a:hover span {
color: black;
}
我喜欢它（出于显而易见的原因）:D
但是我坚持使用大写字母来帮助分割单词，这只是另一种方法。
鼠标悬停时交换颜色可能是一个有趣的技巧。
如何使用span去除链接部分的下划线？我尝试过text-decoration:none;，但它在Firefox等浏览器中不起作用。它仅适用于Internet Explorer。还有其他方法可以做到吗？
谢谢。
您可以通过以下两种方式之一执行此操作
首先，更不被推荐的方式是使用CSS hacks
text-decoration: none !important;其次，是您实际处理标记中问题的方式。
如何将整个链接放在
span标签内，但**不包含**所需的下划线单词。例如
<a href="#"><span>www.badger</span>football<span>forums.com</span></a>a {text-decoration: underline;} <br/>span {text-decoration: none;}