This is the easiest way and the way I do it: Inspect the element you want to add the ::before or ::after to by right clicking it and going to “Inspect Element”. Now in the Developer Tools Console, click on the plus sign icon aka. “New Style Rule”. See the image below, the plus sign … Read more
For anyone finding themselves here (as I did) thinking “how do I inspect this element to apply custom styles?“, you’ll need to enable the user agent shadow DOM to make these vendor elements accessible. For WebKit (Safari) & Blink (Chrome,Edge,Opera,Brave) browsers, follow these steps: Open DevTools (Ctrl+Shift+I) Find the gear icon, top-right and click to … Read more
Got a reply from @Vjeux over at the React team: Normal HTML/CSS: <div class=”something”><span>Something</span></div> <style> .something::after { content: ”; position: absolute; -webkit-filter: blur(10px) saturate(2); } </style> React with inline style: render: function() { return ( <div> <span>Something</span> <div style={{position: ‘absolute’, WebkitFilter: ‘blur(10px) saturate(2)’}} /> </div> ); }, The trick is that instead of using ::after … Read more
img and input are both replaced elements. A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements. :before and :after only … Read more
Is it possible to remove this? Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block: #test p a:before { color: #B2B2B2; content: “► “; display:inline-block; } This is because the CSS specs say: When specified on or propagated to an inline element, it affects all the boxes … Read more
Do not use both combined with a comma. A CSS 2.1 compliant (not CSS3 capable) user agent will ignore the whole rule: When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well. CSS 2.1 gives a … Read more
The CSS 3 selector recommendation is pretty clear about both, but I’ll try to show the differences anyway. Pseudo-classes Official description The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a … Read more
The spec says… Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification. I guess this means they don’t work with img elements (for now). Also see this answer.
It’s pseudo-class vs pseudo-element distinction. Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons. Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>‘s in a … Read more
http://caniuse.com/#search=::after ::after and ::before with content are better to use as they’re supported in every major browser other than Internet Explorer at least 5 versions back. Internet Explorer has complete support in version 9+ and partial support in version 8. Is this what you’re looking for? .Modal::after{ content:url(“https://stackoverflow.com/questions/6668577/blackCarrot.png”); /* with class ModalCarrot ??*/ position:relative; /*or … Read more