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