Change ::before ::after Pseudo Element content using in div by jQuery

How to manipulate and change the content of selected DIV by jQuery.

 

Manipulating and change the content of DIV, SPAN by used CSS pseudo-element ::before and ::after.

Passed content to pseudo element with data attributes and use jQuery to change and manipulate.

 

HTML Code

<body>

<div id="uploadFile">
<div class="uplidFileContent" data-before="Pseudo Before Content Click to change" >
Change Before After Pseudo Element
</div>
</div>

</body>

 

CSS Code

 <style type="text/css">
.uplidFileContent{ height: 300px; width: 300px; position: relative; top: 50%; left: 50%; background-color: #ccc; transform: translate(-50%, 50%); color: #000; display: flex; justify-content: center; align-items: center; font-size: 24px; text-align: center; }
.uplidFileContent::before{ position: absolute; top: -20px; left: -20px; content: attr(data-before);; height: 85px; width: 200px; background-color: rgba(11,11,11,0.5); padding: 15px; border-radius: 10px; color: #FFF; }
</style>

JavaScript Code

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){
jQuery('.uplidFileContent').attr('data-before','Your Pseudo content change');
});

</script>

Download Code

https://myfreeonlinetools.com/source-code/change-content-div-before-after-pseudo-element.zip

 

Leave a Reply

Your email address will not be published. Required fields are marked *