链接中的 CSS 跨度

Question

很抱歉，如果这是一个非常愚蠢的问题，但我是一名开发人员，目前我的设计技能很少，我在个人网站上工作并且遇到了一个小问题。

我有一个带 ul 的顶部导航和 li元素。这些元素包含链接 <a href...在这些标签中我有一个 <span> .

跨度仅在链接悬停时显示。

CSS

div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}

问题是，span 中有相当多的文本，当它显示时会使链接宽度变大，从而将顶部导航的其余部分推向右侧。

我可以做些什么来告诉 a 标签忽略跨度宽度并且在显示跨度时不更改但不影响链接文本(非跨度)自动设置的宽度？

HTML

<div id="topnav">
   <ul>
       <li><a href="http://www.google.co.uk">Example<span>this is a link to google</span></a></li>
       <li><a href="http://www.bbc.co.uk">Another EG<span>this is another link that goes to bbc!</span></a></li>
   </ul>
</div>

值得注意的是，span 中的这段文本出现在导航下方，因此我需要将其全部显示出来。

Answer 1

好吧，如果您愿意，您可以简单地将 span 从流中移除，它们将停止以任何方式影响链接，只需为 span 提供一个绝对位置，并为 a 提供一个相对位置。我认为您也不需要 :visited ，因为我猜它会阻止链接在已经访问过的情况下显示。像这样:

div#topnav a {position:relative;}
div#topnav a span {display: none;}
div#topnav a:visited span {color:purple;}
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;}

您可以更改底部值以满足您的需要，或添加左/右属性以进一步定位它们。您也可以考虑为跨度添加宽度。 a 上的 position:relative 是必需的，这样 span 就会知道从哪里向下移动 50 像素。

编辑:添加了 visited 类，因为它可以通过更改文本颜色在一定程度上帮助用户体验。