You cannot style generated content without defining what that content should be. If you don’t really need any content, just an extra “invisible element” to style, you can set it to the empty string (content: ”) and just style that. It’s easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/ By the way, the snippet you posted is … Read more
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
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
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
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%; }
You can use the Unicode code point of a non-breaking space: p:before { content: “\00a0 “; } See JSfiddle demo (style improved by Jason Sperske).
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.
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