Html 目标：悬停元素之后

当我将鼠标悬停在

#btn home

按钮上时，我想将

：after

元素作为目标

#btn主页a{
显示：内联块；
颜色：#707070；
字号：1.15em；
字号：600；
利润率：0.20px；
}
#btn主页{
位置：相对位置；
显示：内联块；
保证金：0；
}
#家a：之后{
显示：块；
位置：绝对位置；
内容：''；
保证金：0自动；
高度：3倍；
宽度：25px；
背景色：红色；
底部：-7px；
左：0；
右：0；
}

---

这很容易做到。只需将选择器用作

#btn home:hover a:after

#btn主页a{
显示：内联块；
颜色：#707070；
字号：1.15em；
字号：600；
利润率：0.20px；
}
#btn主页{
位置：相对位置；
显示：内联块；
保证金：0；
}
#家a：之后{
显示：块；
位置：绝对位置；
内容：''；
保证金：0自动；
高度：3倍；
宽度：25px；
背景色：红色；
底部：-7px；
左：0；
右：0；
过渡：所有1s轻松；/*仅用于演示*/
}
#btn主页：悬停a:之后{
宽度：100px；

---

您需要在代码中添加以下内容：

#btn-home a:after {
transition:all .4s linear;
}
#btn-home:hover a:after {
width: 50px;
}

#btn主页a{
显示：内联块；
颜色：#707070；
字号：1.15em；
字号：600；
利润率：0.20px；
}
#btn主页{
位置：相对位置；
显示：内联块；
保证金：0；
}
#家a：之后{
显示：块；
位置：绝对位置；
内容：''；
保证金：0自动；
高度：3px；宽度：25px；
背景色：红色；
底部：-7px；左侧：0；右侧：0；
过渡：全部。4s线性；
}
#btn主页：悬停a:之后{
宽度：50px；
}