Question

有问题的部分：

.breadcrumbs a:before, .breadcrumbs span:before {
    background: url('');
    width: 10px;
    height: 20px;
    background-position: 0 -147px;
    content: '';
    position: absolute;
}

我正在尝试为文本做一些填充，但我找不到任何不会影响:before伪元素图像的解决方法。

这是我的代码：http://jsfiddle.net/ZARUz/ 我试图获得这种效果：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;
}

您的伪语未被赋予left和right属性，这使得它们稍微无法预测。

我假设

不会影响来自：伪元素之前的图像。

你的意思是修改实际的图像文件，所以这种方法不会这样做。

Answer 2

需要在“块”之前和之后定位，以便正确显示背景。

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;
}

面包屑三角形使用图像和：之前，：之后的伪元素

2 个答案: