CODEWITHSUNDEEP
htmlcss
user2985669
user2985669

Reputation: 5

Border around list item, including including list style type

When I hover a list item, I want a border around the entire area including the list-style-type:square; At the moment my border can only encompass the text in the list item...

Thanks for the help.

Upvotes: 0

Views: 1377

Answers (4)

George
George

Reputation: 36794

Bring the bullet inside the list item with list-style-position:

ul li{
    padding-left:3px;
    list-style-position:inside;
    border:1px solid transparent;
}
ul li:hover{
    border-color:#F00;
}

JSFiddle

Upvotes: 4

JEYASHRI R
JEYASHRI R

Reputation: 452

Border with list style type

ul li{list-style-position:inside;border:2px solid red;}

Border without list style type

ul li{list-style-position:outside;border:2px solid red;}

Upvotes: 0

SW4
SW4

Reputation: 71230

li:hover{
    border:1px solid grey;
    list-style-position:inside;
}

FIDDLE

Updated Fiddle...

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

li:hover { border: 2px solid blue; 
           list-style-type: square;
           list-style-position: inside; }

Upvotes: 0

Related Questions