我试图创建一个小动画，所以当我将鼠标悬停在某个链接上时，它会强调中间的链接 - JS Fiddle
下面的CSS代码有效，但我不明白它是如何工作的。请有人可以帮我分解。
a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: blue;
}
答案 0 :(得分：5)
a:after在链接后创建一个带有空内联文本的块。然后display:block使其成为阻止类型，例如div默认为behaiour，因此它会转到下一行height: 3px和width: 0（因此不可见）。并因margin:auto而居中;一旦你悬停链接这个块得到witdh并变得可见。 transition属性使动画有效。
答案 1 :(得分：1)
由于您有margin: auto，因此:after内容与<a>元素的中心对齐，因此动画从<a>的中心宽度开始到100％宽度。
答案 2 :(得分：1)
我假设您在询问代码：
a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: blue;
}
如果您不熟悉：之前和之后，我会解释它。 ：before和：after意味着要创建一个对文档不可见的元素（你不能用JavaScript操作它），并且＆＃34;设计＆＃34;用于在元素之前或之后附加少量内容。但是，这并不意味着必须满足。在你的jsfiddle，它作为一个＆＃34;扩展线＆＃34;在链接下面。 ：before和：after表现得几乎像一个孩子的标签，它绑定到（在这种情况下你的链接）。 以下是上面讨论的(reference link)
的参考链接好的，现在我们转到CSS属性......
content属性告诉它在：after /：before之后插入什么文本。 content属性是必需的，但如果您没有要添加的任何文字，则可以将其留空。
好的，现在是display:block; ...
：before和：默认情况下浮动后。如果将其声明为：before，则元素将浮动到所选元素的左侧，如果是：after，则它将浮动到右侧。为了使你的：在链接下面，你必须告诉它display:block;。您可能知道这一点，但display:block;意味着不允许任何其他元素＆＃34; wrap＆＃34;元素周围。这就是为什么当你创建一个div元素时，它不允许任何其他元素出现在它的左侧或右侧。
现在为margin:auto; ...
这意味着将：after＆＃34;元素＆＃34;在链接的（水平）中心。这就是为什么当你将鼠标悬停在链接上时，它会从中心扩展开始。尝试删除margin:auto;以查看它的作用，您将更清楚地了解我在这里谈论的内容。
现在，最有趣的部分！这就是它的可见性和动画效果。当你将鼠标悬停在它上面。首先，我们首先要介绍为什么你不能在第一时间看到它。您无法看到它，因为它的宽度为0像素，背景颜色是透明的。如果你看最后一行transition: width .5s ease, background-color .5s ease;，这一行就是动画发生的原因。这意味着当修改width属性时，应用超过0.5秒（半秒）的更改并在半秒钟内更改背景颜色。在您阅读完这一点之后，您可能想知道＆＃34;什么修改了属性？＆＃34;这将我们带到这段代码中最技术性的部分......
仔细查看选择器a:hover:after。选择器是一个伪类，这意味着当链接被“徘徊”时＃34;结束，应用CSS属性width:100%和background:blue;。结果，宽度扩展到a标签的100％（记住a标签就像父元素一样），背景在半秒的时间内变为蓝色。
如果您要在网站上使用此功能，以下是一些建议。您将需要在转换中使用十六进制代码而不是blue，并且您还希望将transition属性与供应商前缀一起使用，以提供更好的浏览器支持。
以下是代码的最终结果：
a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
-moz-transition: width .5s ease, background-color .5s ease;
-webkit-transition: width .5s ease, background-color .5s ease;
-ms-transition: width .5s ease, background-color .5s ease;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: #0000FF;
}
希望这会有所帮助。如果您仍然不理解上述内容，请提出任何问题。
答案 3 :(得分：0)
首先，您需要了解CSS的虚拟伪元素。对于页面上的每个元素<div>，<a>，任何内容，还有其他两个元素。默认情况下隐藏，css选择器#myelement:before和#myelement:after可以访问这些元素。
通过在这些元素上设置CSS样式content: ''，它们将显示在页面上。然后可以像任何其他元素一样使用任何其他样式设置样式。
border - 少把戏在此特定示例中，未使用border。相反，会显示:after元素，并用于在链接下创建一个3px高的框，其中background-color。通过设置width: 0;然后设置为width: 100%;动画来创建扩展效果。
您看到的代码段：
<a href="www.ign.com">Link</a>
a:after {
...
}
的工作方式与：
完全相同<a href="www.ign.com">Link<span class="after"></span></a>
a .after {
...
}
This JSFiddle works the same way，除非没有混淆（但一旦你理解它就很酷）:after伪元素。
答案 4 :(得分：0)
这里有一个解释和演示：
https://www.rgraph.net/blog/an-example-of-an-animated-expanding-underline-menu-effect.html
因此代码来自（这是一个可以复制到文件并运行的页面的完整示例）：
<!DOCTYPE html >
<html>
<head>
<style>
div#menubar {
font-family: sans-serif;
background-color: #eee;
}
div#menubar span {
display:inline-block;
margin: 10px 2% 10px 2%;
}
div#menubar span::after {
display: block;
position: relative;
top: 3px;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform .25s ease-in-out;
}
div#menubar span:hover::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<div id="menubar">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</div>
</body>
</html>