CSS - 在段落標題中使用圖像和重音線

Question

常見的和美觀的印刷效果是小圖像，可能是一個風格化的箭頭，某些文本和重音線。事情是這樣的：

- >現在這一段---------------------------------

「 - >」是某種小圖形，而「-------」是重音線，可能是彩色的。

我想在css中這樣做，因此在內容管理系統中，作者只需簡單地將行標記爲「h3」，樣式定義將添加圖形和重音線。

我可以把圖形，使用CSS的CSS，看起來像這樣：

HD3 { 背景圖像：網址（/image/arrow_button.gif）; background-position：left top; background-repeat：norepeat; padding-left：55px; }

但我不知道如何添加下面的重音線。重音線應該在文本之後開始並繼續到頁面的右邊距。

Answer 1

有幾種方法可以做到這一點。最好的解決辦法可以是去

<h3><strong>Words</strong></h3> 

與你有上面加

h3 strong { background-color:#ffffff; padding: 0 5px; } /*if white is the background color you want*/ 

，使背景圖像包括你的箭頭，並持續行CSS，而圖像一樣寬它的容器的最大寬度，如果有的話。

通過爲h3中的元素聲明背景顏色，給出圖像停止的錯覺，並在另一圖像中拾取線條。請注意，如果h3可能包裝，你將不得不做一些計算。你可以進入更復雜的解決方案。

或者你可以只內嵌的圖像：

<h3>Words <img src=".." alt="" /></h3> 

請注意，這意味着你的演講更加直接的HTML elemnt控制的存在，這在某種程度上是次優的，但肯定的是簡單並且不是語義上的噩夢，因爲它沒有隱藏任何內容。