如何將圖形標記放在使用純CSS的項目旁邊？

Question

我有一個簡單的菜單：

​​

我想提出一個大的圖形標記（<--）旁邊的當前項目：

* A 
* B <-- 
* C 

我如何能做到這一點只用CSS，不改變標記？我通常的訣竅是將圖像設置爲該項目的背景，但該圖像非常大，因此會被該項目的邊界框裁剪。我強調標記不是一個字符串，它是一個圖像。

Answer 1

你可以做這樣的事情：

li.current:after { 
    content: "<--"; 
    display: inline-block; 
} 

也許給一些左邊緣，例如：http://jsbin.com/aluziv/1/

如果元素本身是圖像只是加載它作爲background-image

li.current:after { 
    content: ""; 
    background: url(...) top left no-repeat; 
    width: ...px; 
    height: ...px; 
    display: inline-block; 
} 

Answer 2

使用CSS :before或：after選擇器。例如：上的jsfiddle

.current:after { 
    content:'<--'; 
} 

例子：http://jsfiddle.net/hr3Rv/

可以增加額外的樣式到:after塊的要求（這是一個小的，你可以用它做什麼限制，但是對於你在做什麼問，這是完全正確的）。

如果標記是圖像，可以參考這樣的：

.current:after { 
    content:url('image.png'); 
} 

另一種選擇是使用圖像的字體（例如，FontAwesome字體）。其他地方包括在你的CSS的字體，以及字體引用相應的字符：

.current:after { 
    font-family: FontAwesome; 
    content: "\f100"; //font-awesome's left double-arrow icon 
} 

（見FontAwesome網站獲取進一步的說明）

Answer 3

嘗試CSS :after選擇器。下面將produce your result（寫入「< - 」當前元素後）：

li.current:after { 
    content: "<--"; 
} 

您還可以將圖像：

li.current:after { 
    content: url('arrow.png'); 
}