CODEWITHSUNDEEP
csshtml-listsborder
user2405469
user2405469

Reputation: 2003

li tag border bottom too long

I was trying to mimick this menu thing I keep seeing, I tried this:

HTML:

<ol>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
</ol>

CSS:

ol {
    list-style-type: none;
}

ol li {
    display: inline;
    padding-right: 4%;
}

ol li:hover {
    border-bottom: 6px solid lightblue;
}

but the problem is, because I am keeping a distance betweem each list item, the bottom border will use all of that space, is there a way to keep it to the length of the word(s) and still keep the space in between?

Upvotes: 1

Views: 775

Answers (3)

helderdarocha
helderdarocha

Reputation: 23637

You can apply the style to an element contained inside the li:

<ol>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
</ol>

Then it will underline only the text and not the whole li.

See JSFiddle

Upvotes: 0

Baathus
Baathus

Reputation: 46

I'm not sure I do understand your question correctly, but you might try to add margin-bottom:1px; to 'ol li', so you regain the space in between the <li>'s.

Upvotes: 0

AlexPrinceton
AlexPrinceton

Reputation: 1203

Just use margin-right instead of padding-right

Upvotes: 1

Related Questions