css实现思维导图树状结构

 <div class="tree">
                    <ul class="treeul">
                        <li>
                            <div class="dv">总公司</div>
                            <ul>
                                <li>
                                    <div class="dv">软件开发部</div>
                                    <ul>
                                        <li>
                                            <div class="dv">一期研发</div>
                                        </li>
                                        <li>
                                            <div class="dv">fffff</div>
                                        </li>
                                        <li>
                                            <div class="dv">bbbb</div>
                                        </li>
                                        <li>
                                            <div class="dv">qqqqqq</div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="dv">aaa</div>
                                </li>
                                <li>
                                    <div class="dv">bbb</div>
                                    <ul>
                                        <li>
                                            <div class="dv">ccccc</div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

.tree {
        // overflow-x:auto;
        ul,
        li {
            list-style: none;
        }
        .dv {
             80px;
            height: 30px;
            // border: 1px solid #ccc;
            display: inline-block;
            font-size: 16px;
            position: relative;
        }
        ul {
            overflow: hidden;
            // padding-top: 20px;
            position: relative;
        }
        li {
            float: left;
            text-align: center;
            position: relative;
            padding: 20px 5px 0 5px;
            font-size: 0;
        }
        .tree li:only-child {
            padding: 0;
        }
        .tree ul ul::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
             0;
            height: 20px;
            border-left: 1px solid #ccc;
        }
        li::before {
            content: '';
            position: absolute;
            right: 50%;
            top: 0;
             50%;
            height: 20px;
            border-top: 1px solid #ccc;
        }
        li::after {
            content: '';
            position: absolute;
            right: 50%;
            top: 0;
             50%;
            height: 20px;
            border-top: 1px solid #ccc;
        }
        li::after {
            left: 50%;
            top: 0;
            right: 0;
            border-left: 1px solid #ccc;
        }
        li:first-child::after {
            border-radius: 5px 0 0 0;
        }
        .treeul li:first-child::before,
        .treeul li:last-child::after {
            border: none;
        }
        .treeul li:last-child::before {
            border-right: 1px solid #ccc;
            border-radius: 0px 5px 0 0;
        }
        .treeul li:only-child::before {
            border: none;
        }
    }

找不到了