刪除內容：「»」;與CSS

我正在使用Yoast Breadcrumb插件的網站，我需要從插件生成的HTML中刪除一行。刪除內容：「»」;與CSS

目前我的痕跡看起來是這樣的：首頁»»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; 
}

來源

2015-05-05 Lisa Jaffe

能否請您複製在小提琴的問題？ – Lal

這不是':: after'的意思。你不能那樣做。 – SLaks

做鏈接幫助嗎？ http://www.nextgelectrical.com/projectprofiles/citipower-office-fit-out/ - 它在Wordpress上，所以我不認爲我真的可以複製它，因爲它是插件生成的？ –

沒有辦法使用CSS定位元素中的單獨部分文本（除了第一個字母，但在這裏不相關）。不幸的是，你最好的選擇是修改插件HTML。

一個頗爲骯髒伎倆可能會幫助你：讓空鏈接佔用負空間，使得第一和第二»重疊，所以它看起來像一個（一點點大膽）：

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

請注意，這可能會導致不同的結果，具體取決於字體大小。我真的不能推薦這個技巧，但如果你100％確定你不能編輯這個HTML，這可能只是做。

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

來源

2015-05-05 14:14:23

太神奇了！問題解決了！ –

很好的答案。 +1正確解釋問題。 @LisaJaffe我以爲你想根據你的問題*刪除*所有的內容。 – Moob

有趣的解決方案。它確實使Chrome上的第一個「符號看起來有點大膽（不幸的是，它們並不完美），但是除非你盯着它一段時間，否則你真的不會注意到它。我不希望成爲開發人員，但不得不在多個瀏覽器和設備上滿足這個需求！ –

如果不隱藏「項目頁面」文本，則無法做到這一點。如果你不關心「項目頁面」的文字，你可以簡單地說：

#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>

否則，你唯一的選擇將是修改插件本身 - 理想包裹「項目頁面「可以覆蓋字體大小的文本，或者更好地將這些»字符轉換爲可以通過將其設置爲display: none而被禁用的僞元素。

來源

2015-05-05 14:09:56

我不是這個解決辦法，但我能想到用CSS來做到這一點的唯一途徑自豪的是一個黑客位的，但你可以畫一個框在的»到掩蓋它。

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

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

來源

2015-05-05 14:20:24 Moob

刪除內容：「»」;與CSS

回答

相關問題