About styling order list_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-08 02:16 出处：网络

<html> <head> <style type=\'text/css\'> ol li{background-color:green;} ol li:hover{background-color:lightgreen;}

相关专题：css

<html>
<head>

<style type='text/css'>
ol li{background-color:green;}
ol li:hover{background-color:lightgreen;}
</style>开发者_JAVA技巧

</head>

<body>

<ol>
  <li>This is first line</li>
  <li>Here is second line</li>
  <li>And last line</li>
</ol>

</body>
</html>

if we use this coding the number's background color is not changing when we mouse over. i want to change the number's background color too when we mouse over, how can we do it.

You've got a couple of options, the first is to use: list-style-position: inside;:

ol li{background-color:green; list-style-position: inside;}
ol li:hover{background-color:lightgreen;}

JS Fiddle demo.

And the second is to use generated content:

ol {
    counter-reset: listNumber;
}
ol li {background-color:green; list-style-type: none; counter-increment: listNumber; position: relative; }
ol li:before {
    content: counter(listNumber);
    background-color: green;
    position: absolute;
    top: 0;
    left: -2em;
    width: 1.6em;
    display: block;
}
ol li:hover,
ol li:hover:before {background-color:lightgreen;}

JS Fiddle demo.

The latter approach, using generated content, is probably the better approach but with weaker cross-browser support; as it fails in IE<8 (though is supported in IE8+).

not only list-style-position should be used, but also text-indent http://jsfiddle.net/HerrSerker/QtRwa/

ol {
    list-style-position: inside;
    padding-left: 0;
    overflow: hidden;
}
ol li {
    background-color:green;
    text-indent: -20px;
    padding-left: 20px;
}