Question

我有一个菜单，在每个元素的中间都有一个边框位于中间（应该位于除了第一个元素之外的每个元素之间）。我尝试使用后选择器来实现这一点，例如a：not（：first-child）：before，但是不起作用。看下面的示例，应该删除第一条垂直线。垂直线的代码已在下面的代码中标记。

.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 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 2

您可以按照以下代码进行操作：

.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 3

正如您之前提到的

我尝试过a：not（：first-child）：before，但这不起作用

您尝试选择菜单的第一个链接，但是.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;
}

如何使用：after选择器在菜单项之间创建垂直线

3 个答案: