If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version First, you only need to include the CSS file of Font Awesome 5 either in the head tag using: <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”> Or within the CSS file: @import url(“https://use.fontawesome.com/releases/v5.13.0/css/all.css”) Then you need to correct the … Read more
There’s no way to give an HTML attribute of any kind to a psuedo element. Just use the selector twice: .error:after { content: “Error Message”; } .error:after, .error-style { color:red; } Also, is there a difference between using “::after” vs “:after”? According to this: https://developer.mozilla.org/en/CSS/:after The ::after notation was introduced in CSS 3 in order … Read more
Your fiddle does work for me in Firefox. And as far as I know, and if this article is up to date this is the only browser that can animate pseudo-elements. EDIT: As of 2016, the link to article is broken and the relevant WebKit bug was fixed 4 years ago. Read on to see … Read more
The question is “Why don’t filters work on pseudo elements in IE8?” The following is as close to a definitive answer as I can muster. It comes from the information on this page. The gradient filter is a “procedural surface” (along with alphaimageloader). A procedural surface is defined so: Procedural surfaces are colored surfaces that … Read more
Inline elements can’t be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them: #whatever:after { content: “\24B6″; display: inline-block; transform: rotate(30deg); } <div id=”whatever”>Some text </div>
Pass “:before” as the second parameter to window.getComputedStyle(): console.log(getComputedStyle(document.querySelector(‘p’), ‘:before’).getPropertyValue(‘content’)); p::before, p::after { content: ‘ Test ‘; } <p>Lorem Ipsum</p>
No. The only way that pseudo-elements can inherit values from the parent of their generating element is when the generating element itself is also inheriting from its parent. This is because inheritance occurs from a parent to a child, one level at a time. For inheritance to work across several levels of descendants, every descendant … Read more
You can use the following code in order to move the content: div.read-more a:before { content: “\00BB \0020”; position: relative; top: -2px; }
Insert display:inline-block; in your css. Something like the one below: .icon-mail:before { content: “\37”; display:inline-block; text-decoration:none; } Here is the JS FIDDLE: http://jsfiddle.net/73p2k/18/
No, you can’t. See Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery. To repeat what is described there, generated content is not part of the DOM. In the words of the CSS2.1 spec, Generated content does not alter the document tree. Generated content only exists in the visual world of the … Read more