PDA

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?

rmedek
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.

rmedek
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.

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

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

http://www.w3.org/Style/Examples/007/roundshadow.html

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.

Excavator
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.