У меня есть меню с границами на полпути вверх, помимо каждого элемента (предполагается, что между каждым элементом, кроме первого). Я пытаюсь добиться этого с помощью селектора после, например, a: not (: first-child): раньше, но это не работает. Посмотрите на пример ниже, первая вертикальная линия должна быть удалена. Код для вертикальных линий был отмечен ниже в коде.

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

Какие-нибудь советы?

css
-1
kandreas127 1 Май 2019 в 14:49

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*/
}
1
Becky 1 Май 2019 в 12:15

Как вы уже упоминали ранее

Я пытаюсь: not (: 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;
}
0
Alba Silvente Fuentes 1 Май 2019 в 12:59