CSS：後內容沒有下劃線

要單獨在導航中的鏈接，我設置了以下CSS：後內容沒有下劃線

#menu-main li a:after{ 
    content: " * "; 
}

當前項目獲得額外

text-decoration: underline;

我現在的問題是，該「*」是還強調，但不應

我已嘗試添加

#menu-main li a:after{ 
    text-decoration: none !important; 
}

但它沒有效果

有沒有人有一個想法如何保持文本下劃線，但不是：內容後？

來源

2012-10-03 oliverspies

在正常流程中，僞元素擴展了元素的尺寸，您看到的是鏈接下劃線的下劃線本身。添加進行驗證。

這裏有一個建議的解決方案：http://jsfiddle.net/Ronny/Smr38/

基本上，使用position: absolute因爲他們不再影響他們的父元素的尺寸僞元素時，這樣的下劃線是在正確的地方切割。你仍然需要照顧指針事件，懸停狀態和聚焦環等事情，但我至少留下了後者，以供你弄清楚。

來源

2012-10-03 13:19:05 Ronny

這對我來說是完美的;謝謝 – oliverspies

這在Chrome中可用，但在IE（甚至10）中不起作用。 – Puzbie

，如果你在標記的控制的時候，你可以在你的鏈接

<a href="..."><span>your link</span></a>

插入一個跨度和使用CSS

a { text-decoration: none } 
a span { text-decoration: underline }

這樣做，注入:after pseudoelement韓元內容不要加下劃線

否則，您可以將樣式應用於li:after（如果可能的話），就像

#menu-main li:after{ 
    content: " * "; 
}

來源

2012-10-03 12:49:48 fcalderan

應避免添加標記以協助造型。將僞類應用於列表項是一種改進，但它又一次爲了樣式而扭曲了語義。 – daddywoodland

僞元素如何影響語義？ OP已經將'*'放在另一個僞元素中，所以原始語義被消除了。 – fcalderan

足夠公平，將星號添加到列表項不會影響語義。不過，顯然增加一個跨度來協助造型。 – daddywoodland

這是一個古老的問題，但這是你使用谷歌所找到的，所以我想我會分享我的解決方案，當你需要僞元素來貢獻「父母」的大小和絕對定位不是一種選擇某些原因：

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
}

由於寬度爲0，因此不會顯示text-decoration。與接受的答案相比，這還涉及較少的代碼和較少的樣式依賴關係。

來源

2015-07-13 09:43:40 Anpan

在我的情況下，我甚至不需要寬度，它只是工作添加內聯塊。

來源

2015-08-25 12:06:36

CSS：後內容沒有下劃線

回答

相關問題