title: Hover > :before > Hover ? How?
body: <p>I am writing a mixin in Less that adds a play button to video tags. It looks like this:</p>
  
  <pre><code>.playVideoButton(@size: 64px) {
    &amp;:before {
      content: "";
      width: @size;
      height: @size;
      top: 50%;
      left: 50%;
      display: none;
      position: absolute;
      .transform(translate(-50%, -50%));
      .border-radius(50%);
      border: 2px solid #fff;
      background-color: rgba(0, 0, 0, 0.35);
    }
    &amp;:after {
      width: 0;
      height: 0;
      content: "";
      border-top: @size / 4 solid transparent;
      border-bottom: @size / 4 solid transparent;
      border-left: @size / 2.4 solid #fff;
      top: 50%;
      left: 50%;
      display: none;
      position: absolute;
      .transform(translate(-35%, -50%));
    }
    &amp;:hover {
      &amp;:before {
        display: block;
        &amp;:hover {
          background-color: rgba(0, 0, 0, 0.60);
        }
      }
      &amp;:after {
        display: block;
      }
    }
  }
  </code></pre>
  
  <p>It Works fine but I want to make a second hover effect for the <code>:before</code>. So I write at the end: <code>&amp;:hover &gt; &amp;:before &gt; &amp;:hover {background-color: rgba(0, 0, 0, 0.60);}</code> but when I hover the <code>:before</code> element I don't get a change of the background opacity.</p>
  
  <p>Chromes Dev Tool hides the hover settings for pseudo elements. So is it not possible to modify them without JavaScript?</p>