CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-element
3CE
3CE

Reputation: 107

CSS: before pseudo elements between <li> with <a> tag

I'm coding for lines which should be divided by "|". BTW the first element don't need to have separator before. This code doesn't work for me. 

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

Upvotes: 0

Views: 2918

Answers (4)

dippas
dippas

Reputation: 60573

the a is going to be always the first-child/first-of-type, you need to select the li instead

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

you can also use the :not() in the 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>

Upvotes: 2

Jakob
Jakob

Reputation: 1895

You have to select <li> instead of <a> in your code and your .clearlist class instead of your .header-level-1 class.

Replace your CSS with this code, then it should work:

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

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

Upvotes: 0

Nimitt Shah
Nimitt Shah

Reputation: 4587

Because a will always be the first child of li.

Try below snippet.

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

Check it on fiddle.. https://jsfiddle.net/nimittshah/6aLocmh9/

:)

Upvotes: 2

aflyzer
aflyzer

Reputation: 563

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

maybe better with some style to the :before element

Upvotes: 0

Related Questions