View Full Version : Possible to generate html with before pseudo-element?

brother wolf
02-08-2007, 01:31 AM
I was wondering if there is a way to use the before and after pseudo-elements in css to generate html? For example to insert an image. The quotes seem to throw a wrench into the works but maybe someone has a work around?

02-08-2007, 05:49 AM
Kinda, but there's really no point… CSS is designed to style an HTML element. If you want to insert elements (or anything else that concerns the DOM), you're looking at Javascript.

brother wolf
02-08-2007, 07:17 AM
I found out how to do what I wanted but I didn't need to generate html. What I needed was like this:

.round:before {content: url(topleft.gif); background: transparent url(topright.gif) no-repeat top right;}

With a few more style rules I can make a box with rounded corners and the html only requires that the element is wrapped in a single div. No nesting multiple divs which seems just as bad as tables to me. I would post an example but my server is acting wierd.

02-08-2007, 07:26 AM
Sounds good… just keep in mind Internet Explorer doesn't support generated content so it'll only work in standards-compliant browsers.

02-08-2007, 08:08 AM
I'd sure like to see an example brother wolf ! What's up with your server?

02-08-2007, 08:35 AM
Check this example from the w3c:


brother wolf
02-08-2007, 02:26 PM
I thought I had come up with that idea:o The only difference is I used a div instead of blockquote. I hadn't tried it in IE yet. I was sort of assuming that IE7 might have implemented before and after. Guess I was wrong.

02-08-2007, 03:00 PM
Thanks for the link rmedek.
It's a neat trick but pretty much useles since IE doesn't do it.