Enable :hover On Margin

Is there any possibility to enable the :hover css effect also on the 'margin area' of an object? I found a dirty solution working with an extra div inside, but is there something m

Solution 1:

As asked in the comments to your question, here is a working answer, using pseudo-elements to fill the 100px side margin:

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

li {
  position: relative;
  margin: 5px100px;
  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:hovera {
  color: red;
}

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

Solution 2:

Not sure if that is what you are aiming for, but maybe it could help:

https://jsfiddle.net/wn4ctxvh/2/

<ul>


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




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

lidiv {
  margin: 5px100px;
  background-color: #f1f1f1;
}

li:hovera {
  color: red;
}

Solution 3:

Just for fun, an alternative using transparent borders that's a little less practical due to the use of background-clip: padding:

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

li {
  margin: 5px100px5px0;
  border-left: 100px solid transparent;
  background-clip: padding-box;
  background-color: #f1f1f1;
}

li:hovera {
  color: red;
}

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

Although, you can obviate the need for that if you can afford to make the a elements blocks and apply the background color to them instead:

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

li {
  margin: 5px100px5px0;
  border-left: 100px solid transparent;
}

lia {
  display: block;
  background-color: #f1f1f1;
}

li:hovera {
  color: red;
}

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