Html 在悬停时展开底部边框不工作？

我试图做的和我正在使用的（部分）代码是在对另一个问题的回答中，特别是“从中心展开”的回答 . 对于描述效果，根本没有发生任何事情。有什么想法吗

HTML

---

我的完整代码已记录在案

您的代码存在两个主要问题（语法错误除外）：

• 您没有将

  display:block

  设置为

  a:after

  伪元素。这是必需的，因为它为伪元素提供了高度和宽度。如果没有这个，伪元素将是0x0px，因此您将看不到任何东西
• Sass代码缩进的方式（我假设您使用的是Sass语法，而不是基于缺少冒号、大括号和缩进的SCSS语法）意味着

  a:hover:after

  选择器嵌套在

  a:after

  选择器下，因此最终选择器输出将是

  。menuHolder li a:after a:hover:after

  。这与任何元素都不匹配，因此悬停时不会发生任何事情

除了这两个变化外，还有3处压痕不一致。也就是说，有些区域提供了5/7的空间，而不是正常的2/4/6/

Sass语法中的固定代码如下所示。提供了具有等效SCSS语法的演示。我在演示中使用了SCSS语法，因为JSFIDLE不支持Sass语法

a:链接，a:已访问
文本装饰：无
颜色：黑色
.菜单
空白：nowrap
溢出：隐藏
梅努霍尔德先生
溢出：隐藏
位置：固定
显示：内联块
排名：0
右：0
宽度：110%
填充：6px 0
背景色：rgba（701061350.65）
文本对齐：右对齐
过渡：所有1都易于输入输出
最大高度：37像素
z指数：10
保险商实验室
保证金：0
填充：0
李：悬停
A.
光标：指针
颜色：$menuGreen
过渡：所有0.1都易于输入输出
李#梅努布特农
过渡：所有0.1秒轻松
文本缩进：首字母
调整大小：无
浮球：对
显示：内联块
填充：15px
线高：5px
字体系列：“Roboto”，无衬线
字体重量：较轻
字号：14px
颜色：黑色
&：不是（：第一个孩子）
右边框：1px实心rgba（37,37,37,0.28）
a:以后
显示：块
内容：“”
底部边框：实心3件$menuGreen
转换：scaleX（0）
转换：转换250ms缓进缓出
利润上限：10px
a:悬停：之后
转换：scaleX（1）
#menuBtnOff，
#梅努布特农
过渡：所有0.3秒轻松
光标：指针
颜色：黑色
&：悬停
颜色：$menuGreen
#梅努布特农
字号：20px
浮动：左

---

我建议的另一个改进是将

：hover

效果放在

li

本身上（即，将选择器设置为

。menuHolder li:hover a:after

而不是

。menuHolder li a:hover:after

）因为文本颜色的变化发生在

li

本身的

：hover

上，这将使其保持一致

---

是此版本的演示。

我从未编写过任何SCS，但在选择器之后不需要大括号吗？@sundance Sass syntax不需要大括号。SCSS语法确实如此。我想OP使用的是前者。谢谢你抽出时间！我不知道我的缩进有这么大，我想sass语法在保持整洁方面有它的缺点+1解释。@Draxy:不客气。很乐意帮忙！我也经常遇到Sass语法的问题。我不会说这不好，但我更习惯CSS，所以SCSS语法对我来说更容易。我想Sass语法对于那些经常使用python、ruby等的人来说是很容易的。

<ul id="items">
  <li> <span id="menuBtnOff" onclick="menuIn()">&#x2573;</span></li>
  <li> <a href="#about" rel=""> About Me </a> </li>
  <li> <a href="#profile" rel=""> What I can do for you </a> </li>
  <li> <a href="#footer" rel=""> Contact </a> </li>
</ul>