如何在菜单中的项目之间使用以下方式创建垂直线:selector

Question

我有一个菜单，除每个元素外，都有边界的一半(应该在每个元素之间，除了第一个元素(。我尝试通过后选择器来实现这一目标，例如答：不(：第一个孩子(：之前不起作用。查看下面的示例，应删除第一条垂直线。垂直线的代码已在代码中标记为

。

.meny 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
.meny li 
{
    float: left;
}
.meny li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 17px 20px 15px 20px;
    position: relative; 
    text-decoration: none;
    font-size: 12pt;
    text-transform: uppercase;
}
/* Below is the code for the vertical lines */
.meny li a:after 
{
    content:""; 
    background: white; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 60%; 
    width: 1.5px;
}

<div class="meny">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</div>

有什么提示？

Answer 1

您可以像下面的代码一样执行此操作：

.meny li:first-child a:after{
   display: none;
}

.meny 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
.meny li 
{
    float: left;
}
.meny li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 17px 20px 15px 20px;
    position: relative; 
    text-decoration: none;
    font-size: 12pt;
    text-transform: uppercase;
}
/* Below is the code for the vertical lines */
.meny li a:after 
{
    content:""; 
    background: white; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 1.5px;
}
.meny li:first-child a:after 
{
   display: none;
}

<div class="meny">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</div>

Answer 2

你几乎在那里。

替换

.meny li a:after {

.meny > li:not(:first-child) a:after {

这将避免第一个垂直线

.meny > li:not(:first-child) a:after {
    content:""; 
    background: white;
    position: absolute;
    bottom: 0; 
    left: 0px; 
    height: 60%; 
    width: 1.5px;
    top: 20%; /*center lines vertically*/
}

Answer 3

之前提到的

我尝试a：不(：first-child(：之前不起作用

您已经尝试选择菜单的第一个链接，但是.meny有4个孩子li，每个li都有1个孩子a。因此，如果您想实现第一个，则必须致电li并获取他的孩子a。

.meny li:not(:first-child) a::before 
{
    content:""; 
    background: white; 
    position: absolute;
    bottom: 0; 
    left: 0; 
    transform: translateY(-30%); // Centered element
    height: 60%; 
    width: 1.5px;
}