那个图一我的那个logo前面的分割线为什么显示不了,我图二是把top取消了才看见的?

img

img


  <style>
        .footer-end{
            background: #3c3d41;
            padding: 30px 0;
        }
        .footer-end .container{
            padding-left: 15px;
            padding-right: 15px;
            margin-right: auto;
            margin-left: auto;
            width: 1170px;
        }
        .foot-logo{
            width: 100%;
            display: table;
            text-align: center;
        }
        .foot-logo a:before{
            content:'';
            position: absolute;
            top: 50%;
            left: 0;
            width: 44%;
            height: 1px;
            background:#545556;
        }
        .foot-logo a:after{
            content:'';
            position: absolute;
            top: 50%;
            right: 0;
            width: 44%;
            height: 1px;
            background:#545556;
        }
        .foot-logo a{
            display: table-cell;
            color: orange;
            font-family: 'Ubuntu Condensed', sans-serif;
            font-size: 40px;
            text-decoration: none;
        }
        .foot-logo a span{
            color: #01a185;
        }
    </style>
```html
 <div class="footer-end">
        <div class="container">
            <div class="foot-logo">
                <a href="home_copy.html">Re<span>sale</span></a>
            </div>
            <div class="foot-social-icons"></div>
            <div class="copy"></div>
        </div>
    </div>


原因如下,
你的那条线是用伪元素表示,设置为绝对定位,这个时候相对于html来进行定位,有可能被那个图片的块给盖住了。
解决:
第一,给伪元素加层级z-index:999,让其显示在最上层
第二,给.foot-logo设置相对定位position:relative,使得伪元素相对于foot-logo块来定位,就不会被logo给盖住了