how to remove the last li::after for first line in specific width of an div


Tags: html,css

Problem :

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

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 is 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 remove these thing which is marked in the red color. Link is dynamically added so we can't say which will be the last li in the first line and which will 'li' will wrap to next line. how can we handle this?

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



Solution :

You can use this code of jquery. Add class to li and remove divider with 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;
  } 
});

    CSS Howto..

    How can I set my image's hover when hovering my text?

    How do I know when to use a Class, an ID or HTML5 to make layouts in HTML using CSS? [closed]

    How to hold a css style on hover

    How to wrap text in table cell without wrapping child elements

    how to change CSS priority (don't use !important)

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    How to move some text down in a li tag?

    how to fit the original text format of a paragraph into the html paragraph element using jquery?

    Showing border when clicking icon on phones browser

    How to make a back-to-top button using CSS and HTML only?

    How to make a list of “background-image” CSS using WebDriver with Java

    How to add css for specific input type text

    CSS: How to align differently sized images in a line?

    css how to set the tr that has a speicifc id

    How to get highlighted words and wrap it in new element with data-attribute?

    How to make one div's height depended of another div's height?

    How do I vertically center an image whose size can change in a div?

    How to keep the top div height fixed and bottom div height in %age

    How to only underline text element inside an element in CSS?

    How to apply CSS to other elements except the hovered one?

    How to render css file from url in to the webview in android

    How to use toggle css classes on an element onclick?

    How to look up and combine data in different parts of an XML source document using XSLT to create SVG visualization of a finite element mesh

    How to stop shadow effect from moving using pure css?

    how to fix the difference in line thickness for a collapsable element

    How to make text “Passed” and progress bar appear in line in smaller views?

    How to check if two elements are toggled using Jquery?

    How to line up images in a horizontal row with CSS?

    How to have two css animations in one tag