pseudo-element

Font Awesome 5 on pseudo elements shows square instead of icon

If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version You need to add font-weight:900 .myClass { font-size:45px; } .myClass::after { font-family: ‘Font Awesome 5 Free’; content: “\f008″; font-weight: 900; } <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”> <span class=”myClass”></span> The regular version of the icon, defined by the … Read more

Can I use a :before or :after pseudo-element on an input field?

:before and :after render inside a container and <input> can not contain other elements. Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they’re not supported. A button … Read more

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that: In HTML: <span>foo</span> In jQuery: $(‘span’).hover(function(){ $(this).attr(‘data-content’,’bar’); }); In CSS: span:after { content: attr(data-content) ‘ any other text you may want’; } If you want to prevent the ‘other text’ from showing up, you … Read more