包括沿着CSS的子彈 <LI> 標簽

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

如果要在li元素中包含項目符號，請使用list-style-position ，其值為inside ：

 .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; } 

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

如果您遇到list-style-position: inside多行問題，可以使用extra / pseudo元素作為標記，而不是使用默認列表標記。 要跟蹤列表項，可以使用css計數器 。

Answer 2

您可以使用CSS 計數器而不是list-style-type: decimal 。 這樣，您還可以設置與listitem的其余部分不同的數字樣式。

 .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; } 

 <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> 

編輯：要在換行符后對齊文本，我們將給計數器一個固定的寬度，並讓它貼在左邊的position: absolute （不要忘記在listitem中添加position: relative和z-index ）。

::before不需要height ::before但它顯示了它的實際工作方式。

Answer 3

它將適用於li ::之前

像這樣改變你的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來設置樣式。

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