CSS：HOWTO強調一個塊，而不是它具有文本

__ _ __ _ __ _ __ _ ___ _title頁的

因此我們假設html標記是<h1>Title of page</h1>，並且h1設置爲width:100%和text-align:right，我希望它只在標題左側加下劃線。

任何線索如何做到這一點？我試圖把這個標題包裝在一個<div>中，給它一個白色的背景並將其稍微向下移動一點，所以它與h1-box的底部重疊，但是，我不是要控制它是否100％跨瀏覽器。

2012-02-29 grrrbytes

替代解決方案：

<div style="width:100%;float:left;border-bottom:1px solid"> 
<h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1> 
</div>

http://jsfiddle.net/VMCax/1/

來源

2012-02-29 16:24:09 MCSI

哇，這很快。非常感謝所有！並特別感謝MCSI :) – grrrbytes 2012-02-29 16:34:45

關於：僞元素解決方案之前：如果您無法預測實際標題將會變得多久，它們的靈活性就不會很高。 – grrrbytes 2012-02-29 16:35:19

這就對了Mixhael，如果你有一個標題打破多行，這也只會爲最後一行創建下劃線影響（除非你寫了多個標題標籤來考慮這個休息），這也提出了這個解決方案的問題 – ckaufman 2012-02-29 20:03:57

只要該行對於顯示內容並不重要，就可以嘗試此操作，因爲它在IE8 +上支持。

h1:before{content:"________________"}

jsfiddle here

來源

2012-02-29 16:21:37 Maroshii

看起來像你正在嘗試做將與包裝容器和浮子內更好地實現。使內部div（或浮動h1）具有白色背景。使外部div具有與文本div的行高相同的間距的重複（repeat-y）背景。

確保包裝的div尊重浮動股利（或溢出：隱藏，或在浮年底明確DIV

這會給你你正在尋找的效果，應多工作電子刊物以及

來源

2012-02-29 16:22:03 ckaufman

我會用CSS去生成的內容，與非破壞空格和下劃線：http://jsfiddle.net/JMVUa/1/

h1:before{ 
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0"; 
    text-decoration: underline; 
}

來源

2012-02-29 16:28:42

你的方法和我的方法有什麼不同嗎？ – Maroshii 2012-02-29 16:45:15

是的，下劃線字符可能看起來不像「真實」的下劃線。但無論如何，這個解決方案不是Mixhael想要的。 – 2012-02-29 16:57:26

CSS：HOWTO強調一個塊，而不是它具有文本

回答

相關問題