The CSS-counter

**momos** · Aug 31, 2004 23:46

Although it's only supported in Opera, it wil one day be in all the browsers, so I thought it would be smart to start using it now so I know the ins and outs already: The counter!

What I was wondering: is it possible to write html in the content-property?

eg:

HTML Code:

 <html>
 <head>
 <style>
 p{counter-increment:section;}
 h1 {counter-reset: section}
 p:before {content: "<span>The start of a paragraph</span>" counter(section);}
 span {color:red;}
 </style>
 </head>
 <body>
 <h1>h</h1>
 <p>test1</p>
 <p>test2</p>
 </body>
 </html>

Opera doesn't support that btw, but I coudn't find any reason not to use it in the specs, but maybe that is because I don't want it to be there?

**megamanXplosion** · Sep 1, 2004 00:52

hmmm, I'm uncertain if this will work like you want, I don't think it will, but it's worth a try...

content: "\00003Espan\00003CThe start of a paragraph\00003E/span\00003C" counter(section);

\00003E is the unicode equivalent of <
\00003C is the unicode equivalent of >

I think that this will simply put "<" and ">" in the text instead of making it HTML, I can't be bothered to test

**megamanXplosion** · Sep 1, 2004 01:02

Just tested, didn't work. Also, I got the two unicode-equivalents mixed up, 3E is for > and 3C is for <

You could just put <span></span> inside of the paragraphs and then use CSS to place your text inside of them.

Then, use p span:after {} to place the list counter value after the span tag.

That should work.

**momos** · Sep 1, 2004 01:19

But is it valid according to the specs (could not find a definition)? Otherwise this would be a very strong way to create repetitive-markup... eg. comment-boxes, everything different from the content itself could be in CSS (like some kind of template)

**megamanXplosion** · Sep 1, 2004 01:45

Originally Posted by momos

But is it valid according to the specs (could not find a definition)? Otherwise this would be a very strong way to create repetitive-markup... eg. comment-boxes, everything different from the content itself could be in CSS (like some kind of template)

I don't think it's valid, to be truthful. There is nothing in the specification concerning the usage of HTML inside of CSS, but it's semantically wrong because HTML doesn't belong in the presentation. If CSS allowed HTML inside of the presentation then it would become the same kind of mess HTML was with it's presentational elements. HTML is for structure and content (the content property in CSS is for decorational purposes and not for informal content), CSS is for presentation, JavaScript (ECMAScript) is for functionality, etc. Each of them serve a specific purpose and blurring the lines between them would go against everything they've been trying to achieve with the structuralization of webpages.

Of course, a better way to make repetitive presentational techniques would be for browser developers to allow people to use multiple :before and :after selectors. For example...

Before Before | Before | Element | After | After After

.element:before:before
.element:before
.element
.element:after
.element:after:after

Unfortunately, none of the browsers currently available support this functionality and it's not talked about at all in the CSS3 specification, so it's neither forbidden or acceptable at this point in time. Hopefully, such functionality will make it into CSS3 or a future specification.

Just my opinion on the matter.

**megamanXplosion** · Sep 27, 2004 13:39

I just dug a little deeper and it appears that the functionality I mentioned is in the Generated and Replaced Content Module Working Draft, so it might be possible to use multiple ::before and ::after psuedo-elements in the future

Example Display

A B C D E

Example Code

Code:

.element::before(2) {
    content: "A ";
}

.element::before(1) {
    content: "B ";
}

.element {
    content: "C ";
}

.element::after(1) {
    content: "D ";
}

.element::after(2) {
    content: "E ";
}

User Tag List

Thread: The CSS-counter

Thread Tools

Display

The CSS-counter

Bookmarks

Bookmarks

Posting Permissions