👀 Views: 208 💬 Answers: 1 📅 Created: 2025-06-28

jquery css pseudo-elements JavaScript

I'm sure I'm missing something obvious here, but I've been banging my head against this for hours... I've searched everywhere and can't find a clear answer. I'm trying to dynamically add content to a list with jQuery and apply specific styles to the :after pseudo-element of each list item. However, it seems that the styles I'm applying through .css() are not reflecting in the rendered page. For instance: ```javascript $(document).ready(function() { $('body').on('click', '#addItem', function() { $('#myList').append('<li class="list-item">Item</li>'); $('.list-item:last').css({'content': '"✔"', 'color': 'green'}); }); }); ``` I've also tried using the `::after` selector within a CSS class, but it doesn't seem to work with the dynamic items either: ```css .list-item::after { content: "✔"; color: green; } ``` What happens is that the list items are added correctly, but the check mark should appear after each item, and it does not. When I inspect the elements in the browser, I can see that the `content` property is not being applied to the pseudo-element. I've checked that the styles are not overwritten by any other CSS rules. I am using jQuery version 3.6.0 and testing this in Chrome. Has anyone encountered this scenario or knows how to make the styles apply correctly to pseudo-elements for dynamically generated content? Any ideas what could be causing this? Is there a better approach? Any help would be greatly appreciated! For reference, this is a production application. What are your experiences with this?