Question

我做了一个小提示来展示这个问题：https://jsfiddle.net/1xum5Lce/4/

HTML：

<ul class="font anim">
  <li class="bckA">Hello</li>
  <li class="bckB">World</li>
</ul>

CSS：

.bckA {
  background-color: #FFFFAA;
}

.bckB {
  background-color: #AAFFFF;
}

.anim li {
  transition: all 200ms;
  transform-origin: left;
}

.anim li:hover {
  transform: scale(1.5);
  box-shadow: 0px 0px 10px #000000;
}

.font {
  font-size: 36px;
  display: list-item;
  list-style-type: decimal;
}

悬停时的背景颜色和阴影仅覆盖标签，变换原点位于项目符号和标签之间。

我需要将子弹包含在所有这些中。

请注意，我不想手动添加编号，因为<LI>标记动态更改了订单。此外，在内线设置内部子弹并不能在换行期间正确处理边距。

这样做的最佳方法是什么？

Answer 1

如果要在inside元素中包含项目符号，请使用list-style-position，其值为li：

＆＃13;

.bckA {
  background-color: #FFFFAA;
}

.bckB {
  background-color: #AAFFFF;
}

.anim li {
  transition: all 200ms;
  transform-origin: left;
}

.anim li:hover {
  transform: scale(1.5);
}

.font {
  font-size: 36px;
  list-style-type: decimal;
  list-style-position: inside;  
}

＆＃13;

<ul class="font anim">
  <li class="bckA">Hello</li>
  <li class="bckB">World</li>
</ul>

＆＃13;

如果您遇到list-style-position: inside多行的问题，可以使用extra / pseudo元素作为标记，而不是使用默认列表标记。要跟踪列表项，可以使用css counters。

Answer 2

您可以使用CSS counters代替list-style-type: decimal。这样，您还可以设置与列表项的其余部分不同的数字样式。

＆＃13;

.bckA { background-color: #FFFFAA; }
.bckB { background-color: #AAFFFF; }

.anim li {
  counter-increment: number;
  position: relative;
  padding-left: 40px;
  transition: all 200ms;
  transform-origin: left;
}

.anim li::before {
  background: rgba(0, 0, 0, 0.15);
  content: counter(number) ". ";
  display: block;
  height: 100%;
  padding-right: 5px;
  position: absolute;
  left: 0;
  text-align: right;
  width: 35px;
}

.anim li:hover {
  transform: scale(1.5);
  z-index: 2;
}

.font {
  font-size: 36px;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

＆＃13;

<ul class="font anim">
  <li class="bckA">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</li>
  <li class="bckB">World</li>
</ul>

＆＃13;

编辑：要在换行符后对齐文字，我们会给计数器一个固定的宽度，并让它贴在左边position: absolute（不要忘记添加{{1 \ n} }和position: relative到列表项目。）

z-index

height不是必需的，但它显示了它的实际效果。

Answer 3

它适用于li :: before

像你这样改变你的css

检查一下： https://jsfiddle.net/bfahmi/1xum5Lce/7/

.bckA {
   background-color: #FFFFAA;
}

.bckB {
   background-color: #AAFFFF;
}

.anim {
    counter-reset: section;
    list-style-type: none;
}
.anim li{
  transition: all 200ms;
  transform-origin: left;
}
.anim li::before {
    counter-increment: section;
    content: counter(section) ". ";
}

.anim li:hover {
  transform: scale(1.5);
}

Answer 4

简单方法使用有序列表而不是无序列表，并使用css进行样式化。

＆＃13;

<ol>
    		<li>List 1</li>
    		<li>List 2</li>
    		<li>List 3</li>
    	</ol>

＆＃13;

在<li>标记中包含CSS项目符号

4 个答案: