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

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

HTML：

  
Hello
  
World

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

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

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

请注意，由于

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

  
Hello
  
World