I was under the impression that I had come up with a brilliant idea...
I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this by utilizing the :after pseudo-class to manipulate either the height or position of a box on hover, while keeping it behind the actual element with a higher z-index. I also intended to use the rgba() function for the transparent background of the <a> tag.
I managed to achieve my desired effect. You can view the outcome here: http://jsfiddle.net/MrPickle/ysdhexbq/3/
However, as I navigated through the menu, I noticed a thin line occasionally appearing at the bottom of the button. While I suspect this might be due to my browser's rendering engine, I am curious if others encounter the same issue and if there is an explanation for it.
In the example provided in the fiddle, I used transition: top to hide the box created by :after, though I encountered similar issues when trying transition: height and transition: transform.
Actually, scratch that, the results were even worse. To see the issue occur frequently, take a look at this version: http://jsfiddle.net/MrPickle/ysdhexbq/5/ It happens more prominently if you quickly move your cursor all the way through before the first transition completes.