Html 如何仅使用鼠标悬停而不使用伪元素之前或之后从底部过渡到顶部？

我有这个锚定标记链接的示例代码片段。如何使用“过渡”将背景色从底部悬停到顶部

我已经找到了这个参考链接，但这不是我想在css中做的，它在之前和之后使用伪元素

.container{宽度：1000px；最大宽度：100%；边距：0自动；填充：0；文本对齐：中心；}
a{边距：0自动；文本装饰：无；宽度：150px；高度：30px；背景：红色；显示：块；边框：1px纯黑；颜色：#fff；边框半径：20px；文本对齐：中心；变换原点：左上；
转换：所有1都很容易；}
a:悬停{背景：绿色；颜色：黑色；边框：1px纯绿色；}
因此，这扩展了我链接到的原始答案，为您提供了不同的转换组合（trbl）。运行代码段以查看正在运行的示例


按钮{
字号：2em；
颜色：#333；
填充：8px；
边框：2倍实心#333；
边缘底部：12px；
}
结核分枝杆菌{
背景大小：100%200%；
背景图像：线性梯度（至底部，#fff 50%，#333 50%）；
过渡：
背景位置。2s缓进缓出，
颜色。2s易进易出；
}
.ex tb:悬停，
.ex tb：重点{
背景位置：0.100%；
颜色：#fff；
}
.ex-tb.ex-t{
背景图像：线性渐变（至顶部，#fff 50%，#a60000 50%）；
颜色：#fff；
}
.ex tb.ex-t:悬停，
.ex-tb.ex-t：关注{
颜色：#333；
}
.ex lr{
背景尺寸：200%100%；
背景位置：-100%0；
背景图像：线性梯度（向左，#fff 50%，#333 50%）；
过渡：
背景位置。2s缓进缓出，
颜色。2s易进易出；
}
.ex lr:悬停，
.ex-lr：焦点{
背景位置：0；
颜色：#fff；
}
.ex-lr.ex-r{
背景图像：线性梯度（向左，#fff 50%，#333 50%）；
背景位置：100%0；
}
前左前右：悬停，
前左前右：焦点{
背景位置：0%0；
颜色：#fff；
}

例子！
例2！
例3
例4
因此，这扩展了我链接到的原始答案，为您提供了不同的转换组合（trbl）。运行代码段以查看正在运行的示例


按钮{
字号：2em；
颜色：#333；
填充：8px；
边框：2倍实心#333；
边缘底部：12px；
}
结核分枝杆菌{
背景大小：100%200%；
背景图像：线性梯度（至底部，#fff 50%，#333 50%）；
过渡：
背景位置。2s缓进缓出，
颜色。2s易进易出；
}
.ex tb:悬停，
.ex tb：重点{
背景位置：0.100%；
颜色：#fff；
}
.ex-tb.ex-t{
背景图像：线性渐变（至顶部，#fff 50%，#a60000 50%）；
颜色：#fff；
}
.ex tb.ex-t:悬停，
.ex-tb.ex-t：关注{
颜色：#333；
}
.ex lr{
背景大小：200%100%；
背景位置：-100%0；
背景图像：线性梯度（向左，#fff 50%，#333 50%）；
过渡：
背景位置。2s缓进缓出，
颜色。2s易进易出；
}
.ex lr:悬停，
.ex-lr：焦点{
背景位置：0；
颜色：#fff；
}
.ex-lr.ex-r{
背景图像：线性梯度（向左，#fff 50%，#333 50%）；
背景位置：100%0；
}
前左前右：悬停，
前左前右：焦点{
背景位置：0%0；
颜色：#fff；
}

例子！
例2！
例3
例4
这个堆栈溢出线程似乎有你想要的答案：只要你能使用背景梯度，这是一个可靠的来源。Thanks@scottohara如果我想悬停背景色，左右和左右，先生。你是如何做到的？背景位置只悬停在顶部或底部我将把它展开成一个新的答案，因为我正在改变一些东西你不知道使用伪元素和
transform
会更好，因为你得到了GPU加速的CSS转换吗。。。另外，梯度在IE9中也不起作用，如果你想支持像这个堆栈溢出线程这样的书，那么它有你想要的答案：只要你能使用背景梯度，这里的人是一个可靠的来源。Thanks@scottohara如果我想悬停背景色，左右和左右，先生。你是如何做到的？背景位置只悬停在顶部或底部我将把它展开成一个新的答案，因为我正在改变一些东西你不知道使用伪元素和
transform
会更好，因为你得到了GPU加速的CSS转换吗。。。此外，梯度在IE9中不起作用，如果您打算支持在背景幻灯片动画方面使用
背景位置比使用伪元素（
：before
，
：after
）更好的方式？@jst.No，伪元素更好，因为可以使用
转换
和获得GPU加速的CSStransitions@LGSon关于如何使用
：before
：after
和
转换
可以缓解任何性能问题，这里有一个明确的观点。但是，伪元素上的渐变的好处在于，您不必通过psuedo元素的z索引来强制它们位于按钮的子节点（文本或其他）后面。在CSS中有多个背景，你可以用这些动画做很多事情。尽管如此，渐变显然更适合于使用语法，如果您需要为传统浏览器执行此操作，它将毫无用处。因此，请使用最适合您的方法。@LGSon但是伪元素上文本的
z-index
如何？@jst.16不确定这是什么意思。你能用一个例子解释一下吗？在背景幻灯片动画方面，使用
背景位置
比使用伪元素（
：before
，
：after
）更好吗？@jst.No，伪元素更好，因为可以使用
转换
和获得GPU加速的CSStransitions@LGSon肯定有