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
Here is how this can work. You need to modify your data attribute as follows: [data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; } <div data-foo=’First line 
 Second Line’>foo</div> Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/ How It Works Using \a does not work, but the equivalent HTML entity does, 
. According to the … Read more
Yes, the second argument to counter() defines the type of counter used, as for the list-style-type from a regular ul or ol; for example: content: counter(chapter, lower-alpha); ul { counter-reset: listStyle; } ul li { margin-left: 1em; counter-increment: listStyle; } ul li::before { margin-right: 1em; content: counter(listStyle, lower-alpha); } <ul> <li>one</li> <li>two</li> <li>three</li> </ul> JS … Read more
To use encoded Unicode characters in content you need to provide either the characters themselves (as you do), or their UTF-8 escape sequences instead of HTML entities: a.up:after { content: ” \2193″; } a.down:after { content: ” \2191″; }
Your open quotes are not terminated, so the browser makes the “smart” assumption that you’re about to nest your quotes, resulting in double outer quotes for the first element and single inner quotes for the second. This is how quote punctuation works in nested quotations. See Wikipedia and the references to nested quotations therein. Notably, … Read more
Answered my own question after reading your advice on the vertical-align CSS attribute. Thanks for the tip! .pdf:before { padding: 0 5px 0 0; content: url(../img/icon/pdf_small.png); vertical-align: -50%; }
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.
You can use the Unicode code point of a non-breaking space: p:before { content: “\00a0 “; } See JSfiddle demo (style improved by Jason Sperske).
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.) As a result, when you have multiple :before rules matching the same element, … Read more
Unfortunately, this is not possible. Per the spec: Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing). In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document … Read more