「text-decoration」和「after」僞元素，在Firefox 8

在頁面上（我爲自己維護並因此可以限制瀏覽器對FF 3.5+的支持）我想添加「SO」在每個鏈接到StackOverflow.com後。首先，我是這樣做的...「text-decoration」和「after」僞元素，在Firefox 8

a[href^='https://stackoverflow.com/']:after { 
    content: "SO"; 
    font-size: x-small; 
    color: #333333; 
    padding-left: 1px; 
    position: relative; 
    bottom: 3px; 
}

......但Firefox強調「SO」就像鏈接本身。閱讀題

之後......我到了以下解決方案：

a[href^='https://stackoverflow.com/']:after { 
    content: "SO"; 
    font-size: x-small; 
    color: #333333; 
    padding-left: 1px; 
    position: relative; 
    bottom: 3px; 
    /* clear the underline */ 
    padding-bottom: 5px; 
    background-color: white; 
}

也許是hack'ish，但它是相當直觀的（下劃線隱藏由上面的背景），它的工作很好（我不記得我檢查了除FF 3.5和FF 7以外的瀏覽器，但FF仍然是唯一的瀏覽器我真的很想支持）。問題在於代碼在FF 8中打破：上面的下劃線清除代碼不起作用。所以我正在尋找一個解決方案。

事實上，我已經發現一個：添加「顯示：內聯塊」，但：

它可能導致「SO」被包裹到一個新行
它不能用與舊的下劃線，清除碼在一起，因爲padding-bottom被添加到鏈接本身

http://cssdesk.com/5TqEN

最後說明一點：我希望它在工作至少在FF 3.5和FF 8，只用CSS，未做「SO」字樣的圖片，比inline-block解決方案

來源

2011-11-20 Eugene

更好，我帶着了這個http://jsfiddle.net/wGb68/4/

a[href^='http://stackoverflow.com/'] { 
    padding-right: 15px; 
    display: inline-block; /* not needed, but fixes Chrome and Opera */ 
} 

a[href^='http://stackoverflow.com/']:after { 
    font-size: x-small; 
    padding-left: 1px; 
    content: "SO"; 
    color: #333; 

    position: absolute; 
}

不良的text-decoration的清算只能在Firefox和Opera中使用此代碼。我無法在任何其他瀏覽器中使用它。：/

在Firefox中不需要display: inline-block，但在Opera和Chrome中不需要它，「SO」不符合換行符，甚至與容器重疊。

來源

2011-11-20 10:56:49 Jona

謝謝。這是相當糟糕的，你必須在'padding-right'中指定後續內容的寬度，但我仍然喜歡這個解決方案。另外，'position：absolute'如何在鏈接上沒有'position：relative'的情況下很有趣。我現在將使用您的解決方案。 – Eugene

「text-decoration」和「after」僞元素，在Firefox 8

回答

相關問題