圆括号计数器出错？

Question

为网页创建计数器很简单，但很难实现并匹配CSS＆amp; HTML处于准确位置。但是我为ol和li标签创建了一个圆形列表计数器。总的来说，它可以显示颜色，悬停效果和其他设计，但每行只显示1,1,1,1,1等等。

            .rounded-list li{
				position: relative;
				display: block;
				padding: .4em .4em .4em 2em;
				*padding: .4em;
				margin: .5em 0;
				background: #ddd;
				color: #444;
				text-decoration: none;
				-moz-border-radius: .3em;
				-webkit-border-radius: .3em;
				border-radius: .3em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}

			.rounded-list li:hover{
				background: #eee;
			}

			.rounded-list li:hover:before{
				-moz-transform: rotate(360deg);
			  	-webkit-transform: rotate(360deg);
			    -moz-transform: rotate(360deg);
			    -ms-transform: rotate(360deg);
			    -o-transform: rotate(360deg);
			    transform: rotate(360deg);	
			}

			.rounded-list li:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -1.3em;
				top: 50%;
				margin-top: -1.3em;
				background: #eee;
				height: 2em;
				width: 2em;
				line-height: 2em;
				border: .3em solid #fff;
				text-align: center;
				font-weight: bold;
				-moz-border-radius: 2em;
				-webkit-border-radius: 2em;
				border-radius: 2em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
			}

<ol class="rounded-list">
<li>Sample text 1</li>
<li>Sample text 2</li>
<li>Sample text 3</li>
<li>Sample text 4</li>
<li>Sample text 5</li>
<li>Sample text 6</li>
<li>Sample text 7</li>
<li>Sample text 8</li>
<li>Sample text 9</li>
<li>Sample text 10</li>
</ol>

Answer 1

您需要先重置计数器。所以我添加了.rounded-list{counter-reset:li;}

请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

＆＃13;

＆＃13;

.rounded-list{counter-reset:li;}
.rounded-list li {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.rounded-list li:hover {
  background: #eee;
}
.rounded-list li:hover:before {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.rounded-list li:before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #eee;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

＆＃13;

<ol class="rounded-list">
  <li>Sample text 1</li>
  <li>Sample text 2</li>
  <li>Sample text 3</li>
  <li>Sample text 4</li>
  <li>Sample text 5</li>
  <li>Sample text 6</li>
  <li>Sample text 7</li>
  <li>Sample text 8</li>
  <li>Sample text 9</li>
  <li>Sample text 10</li>
</ol>

＆＃13;

＆＃13;

＆＃13;