CODEWITHSUNDEEP
cssborderhtml-lists
Toliy
Toliy

Reputation: 27

Placing bottom border under <li>

I need to place a bottom border under outside positioned bullet. I can't use inside positioning because the text wraps under the bullet. Please let me know if its possible to do what i ask.

Thank You.

Upvotes: 1

Views: 7160

Answers (3)

etoxin
etoxin

Reputation: 5264

I would remove the bullet and use a background image for your bullet. ensure you hide the original bullet and apply padding. example below will work just need to play with the background position.

<html>
<head>
    <title></title>
    <style type="text/css" media="screen">
        li{
            border-bottom:solid #c9c9c9 1px;
            background:url(/bullet.gif) no-repeat 0 0;
            list-style:none;
            margin:0;
            padding-left:20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>example</li>
        <li>example</li>
        <li>example</li>
        <li>example</li>
        <li>example</li>
    </ul>
</body>
</html>

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38503

I find that I have much better luck using a small image for the bullet. You can control exactly where it goes to the pixel.

ul li
{
    background-image: url(images/bullet.gif);
    background-repeat: no-repeat;
    background-position: 0 .5em;
}

Upvotes: 1

Stephen S.
Stephen S.

Reputation: 835

Do you need a border under each li or under the last li in the list?

Edit: Sorry i'm new to stackoverflow and didn't realize i asked a question in an answer box.

Solution:

Hopefully you are familiar with the fundamentals of a style sheets. If not go here: 

 .listName li {
    border-bottom: 1px solid #000000;
 }

Upvotes: 0

Related Questions