请问各位前辈为什么我在设置::before后,一旦设置了绝对定位left值如图四条线就会变成一条?

/* 科室介绍 */
.content .dep-info{
    height: 400px;
    background-color: #fafafa;
}
.content .dep-info .center{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 37px;
    position: relative;
}

.content .dep-info .center .more{
    position: absolute;
    top: 37px;
    right: 0px;
    font-size: 15px;
    color: #999999;
}

.content .dep-info .center .col{
    width: 260px;
    float: left;
    padding-left: 40px;
}

.content .dep-info .center .col h4{
    text-align: center;
    margin-bottom: 18px;
    margin-top: 20px;
}

.content .dep-info .center .col::before{
    content:'';
    position: absolute;
    top: 92px;
    /* left: 60px; */
    width: 40px;
    height: 2px;
    background-color: #00978E;
}

.content .dep-info .center .col li{
    float: left;
    text-align: center;
    line-height: 34px;
    width: 119px;
    height: 34px;
    margin-right: 17px;
    margin-bottom: 16px;
    border: 1px solid #AAA9A9;
    border-radius: 5px;
}

.content .dep-info .center .col li a.new{
    font-size: 14px;
    color: #00978E;
    font-weight: bold;
}

.content .dep-info .center .col li:nth-child(2n){
    margin-right: 0;
}

.content .dep-info .center .col li a{
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

 <!-- 科室介绍 -->
        <div class="dep-info">
            <div class="center">
                <h3>科室介绍</h3>
                <!-- 内科部分 -->
                <div class="dep-content">
                    <div class="col">
                        <h4>内科</h4>
                        <ul>
                            <li><a class="new" href=""> 消化内科</a></li>
                            <li><a class="new" href=""> 神经内科</a></li>
                            <li><a href=""> 心血管内科</a></li>
                            <li><a href=""> 肾内科</a></li>
                            <li><a href=""> 血液内科</a></li>
                            <li><a href=""> 免疫科</a></li>
                            <li><a href=""> 內分泌科</a></li>
                        </ul>
                    </div>
                    <!-- 肿瘤科部分 -->
                    <div class="col">
                        <h4>肿瘤科</h4>
                        <ul>
                            <li><a class="new" href=""> 肿瘤内科</a></li>
                            <li><a class="new" href=""> 肿瘤外科</a></li>
                            <li><a href=""> 肿瘤妇科</a></li>
                            <li><a href=""> 骨肿瘤科</a></li>
                            <li><a href=""> 放疗科</a></li>
                            <li><a href=""> 肿瘤康复科</a></li>
                            <li><a href=""> 肿瘤综合科</a></li>
                        </ul>
                    </div>

                    <!-- 外科 -->
                    <div class="col">
                        <h4>外科</h4>
                        <ul>
                            <li><a class="new" href=""> 普通外科</a></li>
                            <li><a class="new" href=""> 神经外科</a></li>
                            <li><a href=""> 心胸外科</a></li>
                            <li><a href=""> 泌尿外科</a></li>
                            <li><a href=""> 肝胆外科</a></li>
                            <li><a href=""> 肛肠外科</a></li>
                            <li><a href=""> 心血管外科</a></li>
                            <li><a href=""> 烧伤科</a></li>
                            <li><a href=""> 骨外科</a></li>
                            <li><a href=""> 乳腺外科</a></li>
                        </ul>
                    </div>
                </div>

                <!-- 儿科 -->
                <div class="col">
                    <h4>儿科</h4>
                    <ul>
                        <li><a href=""> 小儿综合</a></li>
                        <li><a href=""> 小儿外科</a></li>
                        <li><a href=""> 小儿内科</a></li>
                        <li><a href=""> 新生儿科</a></li>
                        <li><a href=""> 儿童营养科</a></li>
                        <li><a href=""> 消化内科</a></li>
                    </ul>
                </div>
                <a class="more" href="">查看更多&gt;&gt;</a>
            </div>
        </div>

在绝对定位中，他会按照最近的所属对象的具有定位坐标的对象进行位移，如果所有上级元素都没有定位坐标，则按照body的定位来设置，如果多个元素的坐标都按照同一上级元素来定位，坐标值相同就会重叠

你可以在 .content .dep-info .center .col 里面加一句 position:relitive，用来对他下边的元素提供新的坐标定位

绝对定位，四条线重叠在一起了

你.content .dep-info .center .col中设置  position: relative; 就可以了
 

.content .dep-info .center .col{
    width: 260px;
    float: left;
    padding-left: 40px;
    position: relative;
}

让position: absolute;绝对定位在自己的<div class="col">内定位