html - 如何修改CSS实现三行？

Question

我目前有两个汉堡包，想展示第三个。已提供 jsfiddle，但由于某种原因无法复制以获得第三条白线。

#nav {
   position: relative;
   top: auto;
   left: auto;
}
                #nav > a {
                    width: 3.125em;
                    height: 3.125em;
                    text-indent: -9999px;
                    background-color: #1472d1;
                    position: relative;
                    float:right;
                    margin-bottom: 20px;
                }
                    #nav > a:before,
                    #nav > a:after {
                        position: absolute;
                        border: 2px solid #fff;
                        top: 45%;
                        left: 25%;
                        right: 25%;
                        content: '';
                    }

                    #nav > a:after {
                        top: 60%;
                    }

                #nav:not( :target ) > a:first-of-type,
                #nav:target > a:last-of-type {
                    display: block;
                }

https://jsfiddle.net/p5f8hekw/

有什么想法吗？

谢谢

Answer 1

将此添加到您的 CSS 中

#nav > a:before {
    box-shadow:0 -7px 0 0 #FFF;
}