How to manipulate CSS pseudo-elements ::before and ::after using jQuery?

jQueryWeb DevelopmentFront End Technology

To manipulate CSS pseudo elements using the hover() function. You can try to run the following code to learn how to manipulate CSS pseudo-elements −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});
});
</script>
<style>
span.change:after {
    content: attr(data-content) ' This is demo text.';
}
</style>
</head>
<body>
<p>Place cursor below...</p>
<span>foo</span>

</body>
</html>
raja
Published on 21-Dec-2017 09:05:09
Advertisements