：hover：：after伪元素样式生效但是不显示对应样式

img



```html
    <div id="section5">
        <div class="box">
            <header class="publicHead">
                <h3>和平人气主播h3>
                <ul>
                    <li class="more"><a href="#" target="_blank">a>li>
                ul>
            header>
            <ul class="photo">
                
                <li><a href="#" target="_blank"><img src="../和平精英/imgs/buqiuren.jpg" alt="">不求人a>li>
                <li><a href="#" target="_blank"><img src="../和平精英/imgs/hls.jpg" alt="">花老湿a>li>
                <li><a href="#" target="_blank"><img src="../和平精英/imgs/nyyx.jpg" alt="">难言言xa>li>
                <li><a href="#" target="_blank"><img src="../和平精英/imgs/rr.jpg" alt="">若若a>li>
                <li><a href="#" target="_blank"><img src="../和平精英/imgs/shayu.jpg" alt="">鲨鱼a>li>
                <li><a href="#" target="_blank"><img src="../和平精英/imgs/wxw.jpg" alt="">王小歪a>li>
            ul>
        div>
    div>



```css
#section5 .photo li:hover::after{
   content: '';
   position: absolute;
   width: 120px;
   height: 120px;
   background: url(../images/sprites.png) no-repeat 0 -55px;
   left: 10px;
   top: 10px;
   cursor: pointer;
}
#section5 .photo li:hover a{
   color: #efa611;
}

img

，伪元素样式生效但是圈不显示，求解

最后的原因是图片路径错了。

absolute相对于父组件第一个relative定位
看看包含他的父组件是relative吗？

把after伪元素的宽高都去了试试