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:
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.