求助！CSS添加背景图后 after失效。谢谢！
求助，css鼠标移动效果失效，
整体样子是这样的，我想实现下图效果
代码我写出来了，是这样：
<!--内容文案-->
<div class="content_text">
<p class="content_text_medium">1</p>
<p class="content_text_light">2</p>
</div>
<!--鼠标移动点击跳转-->
<div class="content_move">
<a href="#">
<div class="content_move_border">
<div class="content_move_text">了解更多</div>
</div>
</a>
</div>/*鼠标移动效果，从中间至上下*/
.content_move{ width: 160px; height: 42px; margin: 50px auto 80px; overflow: hidden;}
.content_move_border{ display: flex; }
.content_move_text{ width: 160px; height: 40px; line-height: 40px; text-align: center; cursor:pointer; color: #232323; border: 1px solid #232323; border-radius: 3px; position: relative; transition: 0.4s linear;}
.content_move_text:hover{ color: #ffffff;}
.content_move_text:after{ width: 0; cursor:pointer; position: absolute; content: ""; top: 0; bottom: 0; left: 0; z-index: -1; background: #232323; transition: 0.2s linear;}
.content_move_text:hover:after{ width: 100%;}然后下一部分，我打算按照设计，将图片设为背景图，可是效果出来是这样
代码是这样
<div class="content_service">
<div class="content_service_speck">
<!--内容文案-->
<div class="content_text">
<p class="content_ser_medium">1</p>
<p class="content_ser_light">2</p>
</div>
<!--鼠标移动点击跳转-->
<div class="content_ser">
<a href="#">
<div class="content_ser_border">
<div class="content_ser_text">了解更多</div>
</div>
</a>
</div>
</div>
</div>/*服务区*/
.content_service{ width: 1920px; height: 960px; margin: auto; margin-top: 80px; background: url("../images/CY_Content_Smart_08.jpg"); background-size: contain; position: relative;}
.content_service_speck{ width :1920px; height: 320px; margin: 320px auto; position: absolute;}
/*服务区通用文案设定*/
.content_ser_medium{ width: auto; height: auto; text-align: center; color: #FFFFFF; font-family:'Microsoft Yahei'; font-size:48px; font-weight: 900; text-decoration:none; margin-top: 80px; letter-spacing: 5px;}
.content_ser_regular{ width: auto; height: auto; text-align: center; color: #FFFFFF; font-family:'Microsoft Yahei'; font-size:32px; font-weight: 500; text-decoration:none; margin-top: 30px; letter-spacing: 3px;}
.content_ser_light{ width: auto; height: auto; text-align: center; color: #FFFFFF; font-family:'Microsoft Yahei'; font-size:24px; font-weight: 100; text-decoration:none; margin-top: 30px; letter-spacing: 1px;}
/*服务区鼠标移动效果，从中间至上下*/
.content_ser{ width: 160px; height: 42px; margin: 50px auto 80px; overflow: hidden;}
.content_ser_border{ display: flex; }
.content_ser_text{ width: 160px; height: 40px; line-height: 40px; text-align: center; cursor:pointer; color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 3px; transition: 0.4s linear;}
.content_ser_text:hover{ color: #232323;}
.content_ser_text:after{ width: 0; cursor:pointer; position: absolute; content: ""; top: 0; bottom: 0; left: 0; z-index: -1; background: #FFFFFF; transition: 0.2s linear;}
.content_ser_text:hover:after{ width: 100px;}
我百度了好久，但是不知道是哪里问题，看CSDN里有说是关于after的问题，新手小白，还望大佬能帮指导下，因为下面设计的，好多都是带背景图的，这个问题解决不了，之后工作进行不下去，谢谢大佬帮帮忙！！！
1、content_service加z-index: 0
2、content_ser加position: relative;
3、content_ser_text:hover:after{ width: 160px;}
用mouseout事件试试，离开的时候把图片清空。
您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y