andimad andimad - 4 months ago 6
HTML Question

Adding gaps in between sprite image

I have this image:

and I would like to add it into my website. But, I'd also like to add a small gap in between each and every flag.

Is that somehow possible? Here is the HTML where I'd like to place it as a pseudo element before the class "headline":

<div class="bottom_dual">
<a title="title" href="#">
<span class="headline">Lorem ipsum</span>
<span class="caption">Lorem ipsum.</span>
<span class="more">
<a class="teaser_link" href="#">more</a>

Thanks for your help!


Image editing isout of the scope of HTML/CSS and I would really suggest just making separate images using image editing software for each flag if this is what you intend to do, but I will provide an ugly work around if you truly wish to do this.

Also, I'm not sure you're using pseudo element correctly.

Place the image tag 5 times - 1 for each flag.

<img id="flag1" src="" />
<img id="flag2" src="" />
<img id="flag3" src="" />
<img id="flag4" src="" />
<img id="flag5" src="" />

Use CSS to crop each image to each flag.

  position: absolute;
  clip:(rect, 0px, 30px, 20px, 0px); // Position of the flag

I hate myself for even giving that answer. Seriously, just edit the image.