css 过渡（悬停和之后）

Question

我想做这样的事情：当光标移动到 .list-menu 时，.list-menu::after 将是

content: '';
display: block;
width: 50px;
height: 2px;
background-color: black;

所以我写了这样的代码： (photo link)

.list-menu::after {
    transition: all 5s ease;
}
.list-menu:hover .list-menu::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: black;
}

但这不起作用，请帮助我

Answer 1

.list-menu:hover:after{
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: black;
}

https://jsfiddle.net/Markov88/xbvp4oys/8/

css 过渡（悬停和之后）

css transition (hover and after)

html

css

properties

styles

css-transitions