CSS: перед псевдоэлементами между <li>с тегом <a>

Question

Я кодирую строки, которые нужно разделить на «|».Кстати, первый элемент не должен иметь разделитель раньше.Этот код не работает для меня.

.header-level-1 .clearlist li a:before {
content: "|";}

.header-level-1 .clearlist li a:first-child:before {
   content: ""; 
}

<div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
  </ul>
</div>

Answer 1

Вы должны выбрать <li> вместо <a> в вашем коде и ваш .clearlist класс вместо вашего .header-level-1 класса.

Замените ваш CSS этим кодом, тогда он должен работать:

.clearlist li a:before {
 content: "|";
}

.clearlist li:first-child a:before {
 content: "";
}

Answer 2

.header-level-1 .clearlist li{
    position:relative;
    margin-bottom:5px;
    }
    .header-level-1 .clearlist li a:before {
    content: "";
    position:absolute;    
    width:1px;
    height:100%;
    background:black;
    left:-5px;
    }
    
    .header-level-1 .clearlist li:first-child a:before {
       content: ""; 
       display:none;
    }

<div class="header-level-1">
            <!-- Login -->
                <ul class="clearlist">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </div>

может быть лучше с некоторым стилем элемента :before

Answer 3

Потому что a всегда будет первым потомком li.

Попробуйте нижеприведенный фрагмент.

.header-level-1 .clearlist li:not(:first-child)  a::before {
content: "|";}

.header-level-1 .clearlist li {
  list-style:none;
  display:inline-block;
}

<div class="header-level-1">
        <!-- Login -->
            <ul class="clearlist">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
            </ul>
        </div>

Проверить это на скрипке .. https://jsfiddle.net/nimittshah/6aLocmh9/

:)

Answer 4

a всегда будет first-child / first-of-type, вам нужно выбрать li вместо

.clearlist {
  list-style: none;
}


.clearlist li a:before {
  content: "|";
}

.clearlist li:first-of-type a:before {
  content: "";
}

<div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
  </ul>
</div>

Вы также можете использовать :not() в li

.clearlist {
  list-style: none;
}

.clearlist li:not(:first-of-type) a:before {
  content: "|";
}

<div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
  </ul>
</div>