Question

我刚刚创建了以下问题

守则：

<div class="BreadcrumbsBox_0">
    <a href="#" class="BreadcrumbsLink">ABC</a>
    <span class="BreadcrumbsDivider"> &gt; </span>
    <a href="#" class="BreadcrumbsLink">DEF</a>
    <span class="BreadcrumbsDivider"> &gt; </span>
    <span class="Breadcrumbs">g</span>
</div>

您可以看到的HTML是从动态数据中填充的结构

我想要的是我需要更改“＆gt;”即面包屑分隔符到我的自定义角色或自定义背景类，但是当我试图通过使用：after，visibility：hidden等来放置我的CSS时，它没有显示我需要的是两个解决方案

我可以通过替换“＆gt;”来添加自定义字符这是动态的
我需要创建一个css类，如果我想要一个背景图像作为一个角色，它可以通过类集成。

等待解决方案。

PS：我只关注基于CSS的解决方案。

Answer 1

试试这个：

.BreadcrumbsDivider:before{content:" hello ";color:red;visibility:visible;}
.BreadcrumbsDivider{margin-right:-12px;}
a,.BreadcrumbsDivider{display:inline;}
.BreadcrumbsDivider{visibility:hidden;}

DEMO

我使.BreadcrumbsDivider透明并使用伪类:before来插入文本。

Answer 2

试试这个伴侣http://jsfiddle.net/Godinall/Hc76h/5/

您可以同时使用自定义分隔线和背景图像

.BreadcrumbsDivider:after {content:"||"}

替换动态面包屑字符

2 个答案: