求助！CSS添加背景图后 after失效。谢谢！

Question

求助，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的问题，新手小白，还望大佬能帮指导下，因为下面设计的，好多都是带背景图的，这个问题解决不了，之后工作进行不下去，谢谢大佬帮帮忙！！！

Answer 1

1、content_service加z-index: 0

2、content_ser加position: relative;

3、content_ser_text:hover:after{ width: 160px;}