CODEWITHSUNDEEP
htmlcsshtml-listsborder
João Gabriel Hümmel
João Gabriel Hümmel

Reputation: 1

<ul> with 2 lines and <li> with border-right

I got a menu and the <li> element has something like a border at right.

The problem about this is when it breaks for a second line of <li> elements. I know that i can take last-child border out, but is there a way to know when it breaks a line?

*Only with CSS and automatic, i cant use nth-child(), since i will not have the control over the categories.

Example: http://jsfiddle.net/m5cy969s/ - I would like to take out the border from the third <li>.

HTML

<ul>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
    <li>Quarto</li>
    <li>Quinto</li>
</ul>

ul,li { padding:0; margin: 0; }

CSS

li {
    display: inline-block;
    list-style: none;
    padding: 3px 6px;
    position: relative;
}

li:after {
    position: absolute;
    content: "";
    right: -2px;
    top: 0;
    border-left: 2px solid blue;
    border-right: 2px solid green;
    height: 100%;
}

ul {
    max-width: 220px;
    border: 1px solid red;
    background-color:pink;
}

Upvotes: 0

Views: 1520

Answers (1)

Patrick Burtchaell
Patrick Burtchaell

Reputation: 4132

The only way to do this with pure CSS would be to manually select the child <li> that breaks at the end and remove the border. In your case, this would be the third child.

li:nth-child(3):after { 
    border: none 
}

To do this "automatically", you would need JS.

Upvotes: 2

Related Questions