使用：前：上未做鏈接的內容部分鏈接後

HTML：

<p> 
    <a href="#">Home</a> 
    <a href="#">Section</a> 
    <a href="#">Subsection</a> 
</p>

CSS：

a:before { 
    content: "/"; 
    padding-right: 4px; 
} 
a:first-child:before { 
    content: "»"; 
}

內容分離顯示作爲鏈接的一部分。

what it looks like

任何方式的內容不是鏈接的一部分，仍然可以使用這個CSS技術？

來源

2013-09-23 kenwarner

這HTML也許應該是'

Home

'，然後你可以使用'李：before'。 – thirtydot

@thirtydot：是的，這也是我的想法，我認爲沒有其他辦法。 –

它似乎有另一種方式與「指針事件」...... –

我建議改變你的HTML ：

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Section</a></li> 
    <li><a href="#">Subsection</a></li> 
</ul>

，然後你可以使用li:before：

li { 
    list-style: none; 
    display: inline; 
} 
li:before { 
    content: "/"; 
    padding-right: 4px; 
} 
li:first-child:before { 
    content: "»"; 
}

http://jsfiddle.net/thirtydot/vQyZc/5/

來源

2013-09-23 16:33:28 thirtydot

，你可以像這樣在你的HTML代碼中的一些變化做：

<p> 
<span><a href="#">Home</a></span> 
<span> <a href="#">Section</a></span> 
<span><a href="#">Subsection</a></span> 
</p>

和CSS這樣的：

span:before { 
    content: "/"; 
    padding-right: 4px; 
} 
span:first-child:before { 
    content: "»"; 
}

這是demo

來源

2013-09-23 16:02:38

使用：前：上未做鏈接的內容部分鏈接後

回答

相關問題