<style>
    div{
        background: blue;
        color: white;
    }
    div:hover{
        background: red;
    }
</style>

<div style="height:150px;"></div>

<script>
    var div = document.querySelector('div');
    setInterval(function() {
        div.textContent = getComputedStyle(div).backgroundColor;
    }, 100);
</script>

<div style="height:150px;"></div>
 
<script>
    var div = document.querySelector('div');
    div.addEventListener('mousemove', function(event) {
        if (event.offsetX > div.offsetWidth / 2)
            div.style.backgroundColor = 'black';
        else
            div.style.backgroundColor = 'red';
    });
</script>

<style>
    .bla{
        position: relative;
        height: 150px;
    }
    .half{
        width: 50%;
        height: 100%;
        position: absolute;
    }
    .left-half{
        left: 0;
    }
    .left-half:hover ~ .background{
        background: red;
    }
    .right-half{
        right: 0;
    }
    .right-half:hover ~ .background{
        background: black;
    }
    .background{
        height: 100%;
        background: blue;
    }
</style>
<div class="bla">
    <div class="half left-half"></div>
    <div class="half right-half"></div>
    <div class="background"></div>
</div>

<style>
 h3:after {
   content: ' rocks!';
   color: red;
 }
</style>

<h3>generated content</h3> 

<script>
  var h3       = document.querySelector('h3'), 
      result   = getComputedStyle(h3, ':after').color;

  alert('the generated content color is: ' + result);
</script>