Isn't there a way that I could add graphics in CSS using the before and after attributes? I've been looking for it all morning - I saw this somewhere online before. Plus, is this approach a valid one?Testing :before and :after using
...
<style type="text/css">
p:before { content: "Paragraph: "; }
p:after { content: " :End of paragraph"; }
</style>
</head>
<body>
<p>Now is the time</p>
</body>
...
I found that IE doesn't understand them yet although Mozilla does. So in general you'll need to find another way to do what you want.I wanted to play around with graphics... it has nothing to do with text. So, I guess I'll have to check for another way .
I was looking to do rounded corners / edges for the page. I'll have to include image tags of some kind to have them display. Thought by doing the :before and :after properties that I could have had added graphics at the top and bottom of my main DIV using CSS.That is doable using background images but you typically have to apply them to multiple elements. <!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m --> has a number of articles that relate to similar situations.
...
<style type="text/css">
p:before { content: "Paragraph: "; }
p:after { content: " :End of paragraph"; }
</style>
</head>
<body>
<p>Now is the time</p>
</body>
...
I found that IE doesn't understand them yet although Mozilla does. So in general you'll need to find another way to do what you want.I wanted to play around with graphics... it has nothing to do with text. So, I guess I'll have to check for another way .
I was looking to do rounded corners / edges for the page. I'll have to include image tags of some kind to have them display. Thought by doing the :before and :after properties that I could have had added graphics at the top and bottom of my main DIV using CSS.That is doable using background images but you typically have to apply them to multiple elements. <!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m --> has a number of articles that relate to similar situations.