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
If the pseudo element has a z-index, then you would need to position the .content element and add a z-index value to establish a stacking context. Updated Example .content { background-color: blue; width: 250px; position: relative; z-index: 1; } ..you could also remove the z-index from the pseudo element and then merely position the .content … Read more
TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited and :visited. However, using a:visited is best practice for future-proofing your code. TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited. There is now a functional difference between a:visited and :visited! Beware. … Read more
It looks like you have discovered a bug in the browser you are using. Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome … Read more
You can’t make a pseudo-element selectable, as it doesn’t exist in the DOM. 5.10 Pseudo-elements and pseudo-classes Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.
No, it is not possible. Pseudo elements are rendered like children: <span id=”myspan”>whatever<after></span> And display:none hides the element including all children. EDIT 1 JavaScript is your best option in my opinion. Even without jQuery changing text is not hard: document.getElementById(“myspan”).innerHTML = “*”; Demo EDIT 2 However, if you really want to do it with CSS, … 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>
The spec says: As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. Note the key phrase at the end of this sentence, which refers to the inner content (or inner text). So, the pseudo-elements are inserted into the beginning of the end … Read more
CSS Scoping spec author here. The answer is actually, officially… undefined! I didn’t think about this interaction when I was writing the Scoping spec. I’ll send an email to the list, and we’ll figure it out. Almost certainly, we’ll settle on whatever browsers currently do (which appears to be letting ::before/after work “as expected” even … Read more
You can’t target :after since it’s content is not rendered in the DOM and it does not manipulate it – for this to work the DOM would have to be re-rendered and CSS can’t manipulate it like this. Check the specification for detailed understanding: http://www.w3.org/TR/CSS2/generate.html#propdef-content Generated content does not alter the document tree. In particular, … Read more