我正在尝试重新创建complex.com 中显示的这种效果，在该网站顶部的三个大面板上有一个彩色底部边框。当您将鼠标悬停在面板上时，底部边框的高度在动画效果中会稍微变大。这是我认为产生效果的代码，但仍然对 :after 的作用感到困惑。我只想为面板或 div 的边框设置动画，而不是整个面板/div。
.hero-unit--style:after {
background: #d93347;
}
.hero-unit:after {
display: block;
height: 3px;
background: #000;
transition: height .2s,box-shaddow .2s;
}
.hero-unit:after, .hero-unit__img-shadow {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
【问题讨论】：
这是一个伪元素。它仅作为其附加元素的样式效果存在。然后它的属性在其拥有的元素悬停时更改/转换。换句话说，它根本不是边界。
CSS ::after 伪元素匹配选定元素的虚拟最后一个子元素。它通常用于通过使用 content CSS 属性向元素添加装饰性内容。这个元素默认是内联的。
基本上，它是这样工作的：
body {
background: #c0ffee;
}
div {
width: 50%;
height: 150px;
border: 1px solid lightgrey;
background: white;
margin: 2em auto;
position: relative;
/* positioning context */
}
div::after {
content: '';
/* required */
position: absolute;
bottom: 0;
/* positioned at the bottom */
width: 100%;
height: 0px;
/* no height to start */
background: darkorange;
transition: height .5s ease;
}
div:hover::after {
height: 16px;
/*finishing height */
}<div></div>【讨论】：
你应该感兴趣的东西很少
hero-unit--pop-culture:after
hero-unit--style:after
hero-unit--music:after
这些只是用于“边框”的颜色（它不是边框，它是伪元素：after）
然后：
.no-touch .hero-unit:hover:after
用于悬停时“边框”的高度
.hero-unit:after {
display: block;
height: 3px;
background: #000;
transition: height 0.2s,box-shaddow 0.2s;
}
这里的height 是起始高度，transition: height 0.2s 是动画。这意味着它会将高度属性从默认值（3px）更改为在.no-touch .hero-unit:hover:after 部分中设置的值。 0.2s 是动画的过渡时间。
之后只有基本的 :after 内容，例如 content: ''，这是强制性的。
希望对你有帮助:)
【讨论】：
其他答案很棒，他们打败了我！但无论如何我都会留下这个，以防万一我解释事情的奇怪方式有帮助！ :D
所以.. 这些东西叫做“伪类”，也有“伪元素”。
伪元素示例：
伪类示例：
正如其他答案所指出的，您可能想要使用的是:hover。
它是这样工作的：
.myClass {
//Default styling (for when it's not being hovered)
}
.myClass:hover {
//Styling for when the element is hovered over.
}
您还可以添加transition 属性以在元素悬停时添加时间延迟和/或动画效果。
例如
transiton: .3s ease;
要回答您关于:after 伪元素的问题，这基本上是在嵌套在所选元素内的所有其他内容之后注入额外的小sn-p 内容，并且只是在结束标记之前。
例如
CSS：
.myClass::after {
content: "I AM AN AFTER PSEUDO ELEMENT";
}
原始 HTML：
<div class="myClass">
<h1>WHATEVER</h1>
<p>blah blah blah</p>
<p>More rubbish content</p>
</div>
应用 CSS 后浏览器解释的 HTML：
<div class="myClass">
<h1>WHATEVER</h1>
<p>blah blah blah</p>
<p>More rubbish content</p>
:after
</div>
您将在页面上实际看到的内容：
哈哈哈哈哈哈
更多垃圾内容
我是伪元素之后
我希望这可以为您解决一些问题并帮助您解决问题！ :)
【讨论】：