我如何 link 文本添加伪 :before 类 在列表中

Question

我有一个包含每个项目的列表 linked。某些项目组将使用 :before 添加文本。文本不会被 linked 但它正在执行 onmouseover 状态。此外，鼠标悬停在 :before 添加的文本上不会激活 link 中的悬停。有什么想法吗？

JSFiddle：https://jsfiddle.net/grundum/1tj6hb4k/10/

HTML

<ul>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
</ul>

CSS

a:link {
  color:#333;
  text-decoration:none;
}

a:hover{
  color: #0078F9;
}

li{
  display:block;
  clear:both;
}

li:hover:before {
    color: #0078F9;
}


li:nth-child(1):before, li:nth-child(2):before, li:nth-child(3):before, li:nth-child(4):before, li:nth-child(5):before{
        display:inline-block;
        content: ">>>>>";
        padding-right:7px;
}

li:nth-child(6):before, li:nth-child(7):before, li:nth-child(8):before, li:nth-child(9):before, li:nth-child(10):before{
        display:inline-block;
        content: ">>>>>>>>>>";
        padding-right:7px;
}

Answer 1

这对你有用吗？将每个li:nth-child(1):before,修改为li:nth-child(1) a:before,

https://jsfiddle.net/evrmorr/bjom5qv8/3/