How to remove the last line li :: after for the first line in a specific width div

Question

.footer-links{             
    width: 600px;    
    margin: 0 auto;             
    background-color: #efefef;         
}
.footer-links li {             
    display: inline-block;             
    padding: 2px 0 6px 20px;         
}         
.footer-links li:first-child {
    padding-left: 0;         
}         
a{             
  text-decoration: none;
  color: #000;             
  line-height: 25px; 
}         
a:hover{
  color: #c56;         
}         
.footer-links li::after {             
  color:#c95413;             
  content: "/";             
  margin-left: 18px;
}
.footer-links li:last-child::after {            
 display: none;         
}

<div class="footer-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy something</a></li>
        <li><a href="#">Ecosystem Partners</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy products</a></li>
        <li><a href="#">Ecosystem products</a></li>
      </ul>
    </div>

Run codeHide result

Here is my HTML how it looks like

    <div class="footer-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy something</a></li>
        <li><a href="#">Ecosystem Partners</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy products</a></li>
        <li><a href="#">Ecosystem products</a></li>
      </ul>
    </div>

here my CSS looks like

.footer-links{             
    width: 600px;    
    margin: 0 auto;             
    background-color: #efefef;         
}
.footer-links li {             
    display: inline-block;             
    padding: 2px 0 6px 20px;         
}         
.footer-links li:first-child {
    padding-left: 0;         
}         
a{             
  text-decoration: none;
  color: #000;             
  line-height: 25px; 
}         
a:hover{
  color: #c56;         
}         
.footer-links li::after {             
  color:#c95413;             
  content: "/";             
  margin-left: 18px;
}
.footer-links li:last-child::after {            
 display: none;         
}

I want to delete this thing marked in red. The link is dynamically added, so we can’t say which one will be the last liin the first line and which “li” will be transferred to the next line. how can we handle this?

https://jsfiddle.net/mrganeshraj/q99dkLk2/

Answer 1

You can use this jquery code. Add a class to li and remove the divisor using css.

var linkHgt = $('li').height();
$('li').each(function(){  
  if($(this).position().top > linkHgt){    
    $(this).css('padding-left','0');
    $(this).prev('li').addClass('break');
    return false;
  } 
});

Answer 2

@ganeshraj Is this the way you need it?

.footer-links{             
    width: 600px;    
    margin: 0 auto;             
    background-color: #efefef;         
}
.footer-links li {             
    display: inline-block;             
    padding: 2px 0 6px 20px;         
}         
.footer-links li:first-child {
    padding-left: 0;         
}         
a{             
  text-decoration: none;
  color: #000;             
  line-height: 25px; 
}         
a:hover{
  color: #c56;         
}         
/*.footer-links li::after {             
  color:#c95413;             
  content: "/";             
  margin-left: 18px;
}*/
.footer-links li:last-child::after {            
 display: none;         
}

<div class="footer-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy something</a></li>
        <li><a href="#">Ecosystem Partners</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy products</a></li>
        <li><a href="#">Ecosystem products</a></li>
      </ul>
    </div>

Run codeHide result