CSS悬停，相同方向的过渡效果

Question

我正在悬停时进行一些基本的CSS填充转换。我以这个代码笔为例：https://codepen.io/brandon4117/pen/ihIgE.现在，在悬停时，背景位置升高以填充div，在悬停关闭时，背景返回到下方。我想知道我如何修改这支笔，以便在悬停时，过渡应该向上，而不是向下。

大多数悬停过渡：悬停在新填充的顶部->底部。悬停在新填充上可移除底部->顶部。我想做的悬停填充顶部->底部，悬停关闭填充删除顶部->底部再次。

看看正在使用的CSS：

div {border-style: solid;
border-color: black;
color: black;
padding: 50px;
background-size: 200% 200%;
background-image: 
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position:0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
div:hover {color: white;
border-color: #A72424;
background-image: 
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position: 0 0%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
a {color: black; text-decoration: none;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;}
a:hover {color: white;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
}
a:active {color: white;}

感谢

Answer 1

好的，我得到了答案：自上而下：

.divclass::after {
position: absolute;
transition: 0.3s;
content: '';
height: 0;
top: 50%;
right: 0;
width: 3px;
background: #fff;
bottom: 0;
top: auto;
z-index: -1;
width: 120%;
}

.divclass:hover::after {
height: 100%;
top: 0;
}

感谢你为我指明了伪Frderico 的方向