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

brother wolf
Feb 8th, 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?

Feb 8th, 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
Feb 8th, 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.

Feb 8th, 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.

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

Feb 8th, 2007, 08:35 AM
Check this example from the w3c:


brother wolf
Feb 8th, 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.

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