启用 :hover on margin

Question

是否有可能在对象的“边缘区域”上启用 :hover css 效果？我发现了一个肮脏的解决方案，里面有一个额外的 div，但是这个简单的结构有没有更优雅的东西：

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

CSS

ul {
  list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li {
  margin: 5px 100px;
  background-color: #f1f1f1;
}

li:hover a {
  color: red;
}

#dirty {
  padding: 0px 100px;
  margin: 0px -100px;
}

嘿是我的工作脏例子：https : //jsfiddle.net/equalsound/wn4ctxvh/

如果可能的话，只有 css 的解决方案会很可爱。

Answer 1

正如您的问题的评论中所问的那样，这是一个有效的答案，使用伪元素填充 100px 边距：

ul {
  list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li {
  position: relative;
  margin: 5px 100px;
  background-color: #f1f1f1;
}

li::before,
li::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}

li::before {
  right: 100%;
}

li::after {
  left: 100%;
}

li:hover a {
  color: red;
}

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>