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


Tags: jquery,html,css,html-lists

Problem :

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 knows how to do this? thanks!



    Solution :

    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)


      CSS Howto..

      how to make a DIV responsive css html

      How to keep a sticky menu contained inside a floating sidebar?

      How to change CSS styling from within Angular 2 Component

      How to change background image based on screen size, possibly with Bootstrap

      How to show two rows of div in single div

      how to write set of styles as a function in compass sass

      Outlines and Borders not showing at all in IE

      How to set angular json model into css

      How do I make current menu item active in asp.net webforms

      How to specify discrete mapper style in cytoscapejs?

      How to generate CSS using Garden with ClojureScript (lein-garden)

      How to give sentence case to sentences through CSS or javascript? [closed]

      Website layout moving slightly between pages - how to stop it

      How to make this loading overlay effect responsive?

      How can I move text to the left with CSS?

      How to Achieve Word Wrap Effect With Children Divs

      ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

      How to get the CSS width of a mobile device in ASP.NET MVC?

      How to apply gradient to the border of a div?

      How can I style a JavaFX menu and its items in CSS?

      How to modify multiple elements of a block with BEM CSS

      How to make the CSS “~” selector work in GWT Css Resource

      HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out?

      How to Make a Dropdown In a Navbar Using CSS?

      How to remove
       tag

      How to fix a div to the same side when a mobile is on landscape

      How to apply different image styles to the same image used on main html page and pop up modal

      How to show mixed html and css with angularJS

      Getting the title of a picture overlayed onto the picture of a slideshow

      How to override a link tag with another in css