How to display a line between the items of an unorderer list that have random number of li every time

I'm doing this page that is made for the user to interact with the page and it'll have a list of pages that the user will determinate. So this list will be display in a div as an unordered list

about

location

runaway

and will have a random number of li's that will depend on the user. I want the list to have between the items a line, but in the last li in the bottom should not have any line and in the first in the top eather.

It should look like

                                 about

---

                                location

---

                                runaway

in my css I have:

li { border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 5px;}

anyone 开发者_JAVA技巧knows how to do this? thanks!

---

How about using this jQuery to apply the css class?

$('li:not(:last)').addClass('test');

find an example here:

http://jsfiddle.net/umupX/7/

Note: I've tried to use the css supplied by you. It seems to be failing in IE8 due to unsupported 'rgba' Note2: I've tested the above in IE, Chrome and Firefox successfully (I would have prefered a pure css solution http://jsfiddle.net/8NZ2s/ but that one was failing in IE8)

---

Use the CSS property :last-child. Also, see this post for more.

---

Some browsers support + but not :last-child, so in that case you can do this:

li + li {
  border-top: 1px solid rgba(255,255,255,0.6);
  padding-top: 5px;
}

This means that the first list item doesn't get a top border.

---

you can do that with css:

li:first-child {*css for first li item*/}
li:last-child {/*css for last li item*/}

---

you can also try this:

ul {
    overflow: hidden;
    list-style: none outside none;
    padding: 0;
}

li {
  border-bottom: 1px solid #D7DFE4;
  overflow: hidden;
  padding: 10px 0;
  vertical-align: top;
  margin: 0 0 -1px;
}

it basically hides the last divider using overflow:hidden and margin-bottom:-1

---

$('li:not(:last)').css({
 'border-bottom": '1px solid black', 
 'padding-bottom": '5px'
}​)​​​​​​​​​​​​​​​​​​​​;​

---

You can also do this with a pseudo-element:

li:nth-child(even):before{
    content: '';
    width: 100%;
    float: left;
    clear: both;
    height: 1px; /* border width */
    background-color: rgba(255,255,255,0.6);
}