删除内容：“»”;用CSS

Question

我正在为一个网站使用Yoast Breadcrumb Plugin，我需要从插件生成的html中删除一行。

目前我的面包屑看起来像这样： 首页»»第1页»项目页

<p id="breadcrumb">
    <a href="http://www.mywebsite.com/">Home</a> » 
    <a href="http://www.mywebsite.com"></a> » 
    <a href="http://www.mywebsite.com/project-page-1/">Page 1</a> 
    » Project Page
</p>

如您所见，第二个链接没有文字，我不想显示整行，包括»。

我已经尝试了以下CSS（没有运气！）我还能做些什么来删除它？

p#breadcrumb:first-child a::after {
    display: none !important;
}

Answer 1

如果不隐藏“项目页面”文本，则无法执行此操作。如果您不关心“项目页面”文本，您可以简单地：

#breadcrumb {
  color: transparent;
  font-size: 0;
}

#breadcrumb a {
  font-size: 14px;
  margin: 0 1px;
}

<p id="breadcrumb">
    <a href="http://www.mywebsite.com/">Home</a> » 
    <a href="http://www.mywebsite.com"></a> » 
    <a href="http://www.mywebsite.com/project-page-1/">Page 1</a> 
    » Project Page
</p>

否则你唯一的选择就是修改插件本身 - 理想情况下将“Project Page”文本包装在自己的元素中，你可以覆盖字体大小，或者更好地实际转换那些»将字符设置为伪元素，可以通过将它们设置为display: none来禁用。

Answer 2

无法使用CSS定位元素内部文本的单独部分（第一个字母除外，但这里不相关）。不幸的是，你最好的选择就是修改插件HTML。

一个相当脏的技巧可能会帮助你：让空链接占用负空间，导致第一个和第二个»重叠，所以它看起来像一个（只是更大胆）：

#breadcrumbs a:empty {
    margin-left: -12px;
}

请注意，这可能会导致不同的结果，具体取决于字体大小。我真的不能推荐这个技巧，但如果你100％确定你不能编辑HTML，那可能就是这样。

工作演示：http://jsfiddle.net/yrj594oo/

Answer 3

我并不为这个解决方案感到骄傲，但我认为用CSS做这件事的唯一方法是有点黑客但是你可以在上绘制一个框{{1}掩盖它。

＆＃13;

＆＃13;

»

＆＃13;

#breadcrumb a {
    position:relative;
}
#breadcrumb a:after {
    content:" ";
    display:block;
    position:absolute;
    top:0; left:100%;
    background:white;
    height:1em;
    width:.8em;
}
#breadcrumb a:empty {
    width:0px; overflow:hidden;
}

＆＃13;

＆＃13;

＆＃13;