CSS: using image sprites with css pseudo classes :before and :after

Question

I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px.

I have an element that is either in a div.something or in a div.anything. Depending on which class it's in I want to add a corner cap to the left or right.

So therefore I'm positioning the .element relative, the apply the :before pseudoclass to the img and position it absolute with a height and width of 26px so only one icon of the sprite fits in. I also apply "overflow:hidden" in order to hide the second icon on the sprite.

.element {
    position:relative;
}

.element:before{
    content: url("../images/sprite.png");
    position: absolute;
    height:26px;
    width:26px;
    overflow:hidden;
}

.something .element:before {
    top: -2px;
    left: -2px;
}

anything .element:before {
    top: -28px;
    right: -2px;
}

This works fine for the left-corner where I use the first top icon in the sprite. However now I wonder how I can show only the second icon in the sprite for the "anything .element".

So actually the "mask" should be positioned at -2px, -2px but the sprite img inside should start at -26px so the second icon is shown.

Is this possible with css the way I'm doing it right now?

Can you show a http://jsfiddle.net/ demo of what you have so far? As far as I know, `:before` does not work with `img` elements: http://jsfiddle.net/thirtydot/CWXS3/. So, your question is rather confusing. — thirtydot, Aug 15 '11 at 12:55
edited my question to .element not img. Just wanted to make it easier to understand. Didn't know it doesn't work with img — matt, Aug 15 '11 at 12:58
Well, that makes sense. The answer you've been given is correct. Give this a read: http://tinyurl.com/so-hints. I like this part: `"Don't give me code which is "something like" the real code but which clearly isn't the real code"`. — thirtydot, Aug 15 '11 at 13:02

Tatu Ulmanen · Accepted Answer · 2011-08-15T13:02:40.950

27

Don't use content to insert your image, as you cannot modify its position. Instead, set the content to " " and add the sprite as a background image. You can then use the background-position property to move the sprite to the correct position. Otherwise your example should be working just fine.

A working demo:

http://jsfiddle.net/RvRxY/1/

edited Aug 15 '11 at 13:02

answered Aug 15 '11 at 12:57

Tatu Ulmanen

123,288
34
187
185

score 3 · Answer 2 · answered Aug 15 '11 at 13:34

Support for :before and :after pseudo elements on img tags is limited, if at all existent on most browsers.

The best solution would be to place your img inside a div, and then have the class applied to the actual div, rather than the img.

You almost have the usage for the pseudo element correct. You can give this a try:

.somediv { position:relative;}

.somediv:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  top: 0;
}

.somediv.foo1:before { 
  background: url("../images/sprite.png") no-repeat -2px -2px;
  left: 0;
}

.somediv.foo2:before { 
  background: url("../images/sprite.png") no-repeat -2px -28px;
  right: 0;
}

Use the background:; property rather than the content:; property so that you can position the sprite within the :before pseudo element.

left:; right:; and top:; should be used for absolute positioning of the pseudo element relative to its parent (.somediv).

Placing a 1px border around your pseudo element will help you understand the different positioning :)

CSS: using image sprites with css pseudo classes :before and :after

2 Answers2