Breadcrumb's triangles using images and :before, :after pseudoelements - css

Question

Problematic part:
.breadcrumbs a:before, .breadcrumbs span:before {
background: url('');
width: 10px;
height: 20px;
background-position: 0 -147px;
content: '';
position: absolute;
}
I am trying to make some padding for the text but I can't find any workaround that wouldn't affect image from the :before pseudoelement.
Here's my code: http://jsfiddle.net/ZARUz/
I am trying to obtain that effect: http://cl.ly/SVBR

Answer 1

http://jsfiddle.net/TreeTree/ZARUz/12/
.breadcrumbs a, .breadcrumbs span {
height: 20px;
background: url('http://s1.pixelize.pl/breadcrumb.png');
background-position: 0 -21px;
display: inline-block;
position:relative;
padding-right:10px;
}
.breadcrumbs a:after, .breadcrumbs span:after {
background: url('http://s1.pixelize.pl/breadcrumb.png') white;
width: 10px;
height: 20px;
background-position: 0 -63px;
content:'';
position: absolute;
right:0;
}
.breadcrumbs a:before, .breadcrumbs span:before {
background: url('http://s1.pixelize.pl/breadcrumb.png');
width: 10px;
height: 20px;
background-position: 0 -147px;
content:'';
position: absolute;
left:-10px;
}
Your pseudos weren't given left and right properties which made them slightly unpredictable.
I assumed by
that wouldn't affect image from the :before pseudoelement.
you meant modifying the actual image file, so this method doesn't do that.

Answer 2

Need to position your before and after "blocks" so the backgrounds can appear correctly.
A JSFiddle Lives Here
.breadcrumbs a, .breadcrumbs span {
height: 20px;
background: url('http://s1.pixelize.pl/breadcrumb.png');
background-position: 0 -21px;
display: inline-block;
position: relative;
padding: 0 10px;
margin-right: 30px;
}
.breadcrumbs a:after, .breadcrumbs span:after {
background: url('http://s1.pixelize.pl/breadcrumb.png');
width: 10px;
height: 20px;
background-position: 0 -63px;
content: '';
position: absolute;
right: -10px;
}
.breadcrumbs a:before, .breadcrumbs span:before {
background: url('http://s1.pixelize.pl/breadcrumb.png');
width: 10px;
height: 20px;
background-position: 0 -147px;
content: '';
position: absolute;
left: -10px;
}