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
Updated on 15-Jun-2020 09:15:13

Advertisements