Html 混合模式按钮悬停事件问题

我正在尝试使一个

混合模式

工作，以便出现背景幻灯片。我已经准备好了

问题是，我们需要它看起来

但我不想摆脱它的倾斜或幻灯片从右边。我尝试过使用与该示例中相同的混合模式，但无论我做什么，它都不会保持悬停时的红色幻灯片颜色和红色下的白色文本。我只想使用伪元素，并将html保持在最低限度。我认为这是可能的使用伪元素，但混合模式不配合我，不知道如何让它看起来更像第二小提琴。我的html如下所示：

CSS是：

a{
位置：相对位置；
文字装饰：无；
显示：内联块；
填充：15px 30px；
边框：1px实心#f16251；
背景：黑色；
颜色：#f16251；
字体大小：30px；
字体系列：arial；
混合模式：正常；
溢出：隐藏；
z指数：1；
}
a:以前{
内容：''；
位置：绝对位置；
顶部：0；底部：0；右侧：0；
宽度：100%；高度：100%；
背景：红色；
混合模式：倍增；
变换原点：0；
变换：translateX（100%）skewX（30度）；
转变：转变.25s；
z指数：3；
}
a:悬停：在之前{
变换：translateX（45%）skewX（30度）；
}
a:悬停：之后{
位置：绝对位置；
顶部：0；底部：0；左侧：0；右侧：0；
宽度：100%；
身高：100%；
背景：白色；
}
a:以后{
内容：''；
位置：绝对位置；
顶部：0；底部：0；右侧：0；
宽度：100%；高度：100%；
背景：白色；
混合模式：差异化；
z指数：2；
}

如何使背景文本仅在红色滑过该文本时显示为白色？我的

混合模式

代码肯定是错误的，但在这里似乎是可以做到的。

嗯，这很有趣：）

a{
位置：相对位置；
文字装饰：无；
显示：内联块；
填充：15px 30px；
边框：1px实心#f16251；
背景：白色；
颜色：黑色；
字体大小：30px；
字体系列：arial；
混合模式：正常；
溢出：隐藏；
z指数：1；
}
a:以前{
内容：''；
位置：绝对位置；
顶部：0；底部：0；右侧：0；
宽度：100%；高度：100%；
背景：白色；
混合模式：差异化；
变换原点：0；
变换：translateX（100%）skewX（30度）；
转变：转变.25s；
z指数：3；
}
a:悬停：在之前{
变换：translateX（45%）skewX（30度）；
}
a:以后{
内容：''；
显示：块；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
z指数：100；
背景：#f16251；
混合模式：屏幕；
}

---

如何将边框颜色和内部文本颜色设置为红色？我需要它是这种颜色：

#F16251

可能吗？就是那种颜色。哦，你说得对，就是那种颜色！你太棒了，兄弟，非常感谢！我一直在努力让它工作！我非常感谢你的帮助！不用客气，我差点就放弃了，但这和小心的堆放顺序有关。