Html 有人能给我解释一下这个css代码吗

嗨，我是css新手，我遇到了这个文本下划线动画，我不明白它是如何工作的。如果我只是从代码中提取一些东西，它就会停止工作。提前谢谢

正文{
背景色：黑色；
}
身体a{
字号：200；
字号：18px；
文本转换：大写；
文字装饰：无；
位置：相对位置；
颜色：#fff；
}
机构a：参观{
颜色：白色；
}
身体a：悬停{
颜色：白色；
}
主体a：之后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
宽度：0%；
边框底部：2倍实心#fff；
过渡：0.4s；
}
主体a：悬停：之后{
宽度：100%；
}

---

这里真正重要的是伪元素“：after“and”：before”（虽然最后一个元素不在这里）

这一部分是它的生命力所在：

body a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #fff;
  transition: 0.4s;
}

你看，基本上你在看一个元素的伪元素的属性声明。（您可能想深入研究一下CSS-CSS3）

它表示，在作为body子元素的锚点上触发悬停事件后，它将使其伪元素具有2像素宽的底边框，具有白色纯色和0.4秒的过渡

我们可以从其他声明中看出，伪元素的宽度在其初始状态下为0%，在悬停之后，它通过一个转换（使其从左向右移动，如示例所示）变为100%

---

在这个CSS代码中有很多事情要考虑，但是你应该真正学习基础知识！ 此行创建动画： 过渡：0.4s

您将注意到主体a:hover:after规则的宽度为100%。好的，该转换属性告诉渲染引擎，在正常状态和悬停状态之间有值更改的任何属性上都将执行动画

悬停时，渲染引擎会显示您希望将“宽度”属性设置为100%。在悬停之前，它被设置为0%。过渡显示：“好的，悬停时，在十分之四秒的时间内，将宽度属性从0设置为100%

---

悬停状态和非悬停状态之间的任何属性都是如此。换句话说，只要两个状态使用不同的值定义同一属性，您就可以一次设置多个属性的动画。

一个

：在
之后，psuedo CSS表示另一个“虚拟”属性“元素附加在所选元素之后

附加在
a:after
上的psuedo元素是一个具有底部
边框的简单元素，但没有宽度（
0%
）

该元素上的
transition
属性意味着该元素的所有属性在更改时都将设置动画

所以

当您将元素悬停（在
主体a:hover:after
中说明）时，该“虚拟”元素的宽度设置为100%，动画将发生
我明白了，但是内容、位置、底部和左侧如何？这些属性与动画有什么关系，如果您取出其中任何一个，动画甚至不会出现！