Placing HTML Pseudo elements.

Question

My css looks like this;

p:not(.dummy):after
{
    content: url(../../irhiddenchars/img/afterimage_9x9.gif);
}

I wish to take a taller (height) gif, but my lineheigth is increased when the css gets applied (even though there seems to be enough space for a bigger picture, line-height for a p-tag is 18px). Is it possible to place the pseudo element containing the gif somehow a little bit higher on the page? Is there any other solution?

Answer 1

use jQuery, not only to insert the content but you can then give it a class and style it to position exactly where you want it.

Answer 2

Try setting the margin and padding to 0. The p elements (among others) have a implicit standard mark-up determined by the browser.

I'm still wondering however why you use the :after pseudo-class instead of nesting an img. Any specific reason for that?

Edit: Wow, this question is 2 months old, why did it appear on the recent questions page?

Answer 3

I solved it dropping the image after approach (i had an image showing a Pilcrow symbol). Instead i use the Pilcrow character (which gets rendered according to the fontsize choosen):

body.hiddenchars p:after
{
    content: '\00b6';
}