Remove last li row border - html

Question

I need to remove border bottom of last li row.
like this below image example
Thank You in advance :)
jsfiddle.net/foLacgg3/1

Answer 1

If, you don't want to rewrite code, you can use pseudo elements to the , and give it background of your page(this will only hide border from any of last elements inside ul)
ul {
list-style: none;
padding-left: 0;
display: block;
position: relative;
overflow: hidden;
}
ul:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: #F3F5F6;
/*(page background)*/
width: 100%;
}
https://jsfiddle.net/foLacgg3/2/

Answer 2

Looking at the code snippet you posted after my first answer:
it seems you either have either three or four elements per row with a breaking point at around 740 pixels in between the two options.
it seems you have 9 list elements in the grid.
if you don´t know the number of li elements - then I can help you if you can use SASS instead of CSS.
Therefore, presuming you know the number of li elements - let´s say your code is like this:
#media only screen and (max-width:740px) {
ul.menu li:nth-child(n+7) { border:none;}
}
And for other screen sizes:
#media only screen and (min-width:740px) {
ul.menu li:last-child {border:none;}
}