How to Apply :hover to :before and :after Elements?

The post is about applying :hover CSS effect to content generated using :before and :after elements. This is easy to get tricked when you occasionally code CSS. When you apply CSS to their parents then that will get applied to their :after and :before elements as well.

We cannot write CSS like this:


.social-share i:after:hover {}

If we need to change something on hover on :after element then we can write like this:


.social-share i:hover:after {
    color:red;
}

Here is an example:
font-awesome

The below code is used for to get Facebook Icon using Font Awesome.


<a href="#" class="icon-alone">
    <i aria-hidden="true" class="fa fa-facebook fa-2x"></i>
    <span class="screen-reader-text">Facebook</span>
</a>

I have added 'satya' using :after selector:


.social-share i:after {
    content:'satya';
}

:before is using by font-awesome.css file for displaying Icons. So, I used :after to generate test content. Using the selector (.social-share i:hover:after{}), I mentioned above, when I hover over 'satya' then satya is shown in red color.