css-content

As defined here: http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment You can use code like the following to increment numbers in pseudo elements. H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Is there a way you can use the same code to increment letters like "a", "b", "c", etc? Thank you! Yes, the second argument to counter() defines the type of counter used, as for the

Is it possible to have a new line in a data attribute ? I am trying to do something like this: CSS: [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-foo="First line \a Second Line">foo</div> I found that "\a" is a new line in CSS, but still does not work for me. Here is how this can work. You need to modify your data attribute as follows: <div data-foo='First line Second Line'>foo</div> and the CSS (proof of concept): [data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; } Fiddle Demo:

Is it possible to have multiple :before pseudos for the same element? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them. BoltClock 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