CSS標題下劃線沒有文字部分

也許這已經回答過，但我還沒有找到一個適當的解決方案，我的問題在SO上。CSS標題下劃線沒有文字部分

好吧，這裏有雲：

我需要100％的下劃線標記h3除了其中實際文本的一部分。像這樣：

我的超級冠軍 ____________________________________________________

這必須是100％的寬度，所以像

h3:after { 
     content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0"; 
}

固定數量的空格是行不通的。

此外，標籤必須是純。意思是它沒有被DIV或span等圍繞......（用戶提交的來自wysiwyg的內容）它只是一個h3標籤。

在css3中這可能嗎？如果不是，我願意添加一些js使其工作。

UPDATE：

這裏的預計結果的截圖：

enter image description here

來源

2013-10-25 kernelpanic

你能預計將結果添加屏幕？ –

我的超級頭銜________________________________ –

你可以嘗試這樣：

標記

<h3>A 100% wide title</h3>

CSS

h3 { 
    display: block; 
    width: 100%; 
    background: #fff; 
    white-space: nowrap; 
    overflow: hidden; 
} 

h3:after { 
    content: ""; 
    display: inline-block; 
    width: 100%; 
    margin-left: .5em; 
    border-bottom: 1px #767676 solid; 
}

例子：http://cdpn.io/Awpef

產生的效果

enter image description here

來源

2013-10-25 10:00:07 fcalderan

乾杯隊友！這完美的作品！ – kernelpanic

不客氣 – fcalderan

美麗！你知道這個解決方案如何跨瀏覽器嗎？ –

喜歡這個？demo

h3:after { 
    content:""; 

    border-bottom: 1px solid black; 
    overflow: hidden; 
    width: 100%; 
    display: inline-block; 
    position: relative; 
    left: 150px; 
    top: -20px; 

}

來源

2013-10-25 09:59:31

試試這個：

CSS

h3 { 
    display:block; 
    width:100%; 
    overflow: hidden; 
    position: relative; 
} 
h3:after { 
    content:''; 
    border-bottom:1px solid black; 
    position: absolute; 
    width: 100%; 
}

JSFIDDLE

來源

2013-10-25 10:01:47 fiskolin

如果不使用:after僞é字元素，你可以這樣做：

<div id="wraptitle"><h3>A Second Title</h3></div>

CSS

#wraptitle { 
    border-bottom : 1px solid black; 
    position : relative; 
} 

#wraptitle h3 { 
    display : inline; 
    position : relative; 
    bottom : 0; 
    border-bottom : 1px solid white; /* white is actually the background color */ 
    padding-right : 10px; 
}

充分利用h3元素的確認頁邊距設置爲0，或者它的邊框就不去了吧。

一個活生生的例子可以看這裏：http://jsfiddle.net/JYNn5/

來源

2013-10-25 10:14:10 Broxzier

它的工作原理，但OP要求解決方案沒有額外的周圍標記 – fcalderan

CSS標題下劃線沒有文字部分

回答

相關問題