用CSS在標題旁邊添加一行

有沒有辦法使用CSS在標題旁邊顯示一行？下面是我在談論的圖像：用CSS在標題旁邊添加一行

我可以用一個靜態背景圖片做，但會要求每一個標題自定義CSS。我可以使用 :after和 h1上的背景顏色來做一些黑色的東西，但是它對於漸變背景看起來不太合適。

我想用CSS來做，而不是JavaScript。如果它在舊版瀏覽器中不起作用，那很好。

UPDATE：

在過去，我已經做了這樣的事情：

<h1><span>Example Text</span></h1>

h1 {background-image:url("line.png");} 
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}

雖然這樣的作品，它的哈克，而且它不很好地工作漸變背景，因爲span必須具有純色背景。

我真正尋找的是這樣的：

<h1>Example Text</h1> h1 {background-image:url("line.png");} /* but don't appear under the example text */

我在原來的職位說錯有關:after的事情，我在想另一個問題，我在過去的。

來源

2013-11-25 JacobTheDev

發佈您的HTML。您可能需要添加一些額外的標記來提供一個元素來包含該行。 –

我不明白你面臨的問題：發佈一些代碼或小提琴後。 – DaniP

不會真的考慮使用僞元素作爲'hacky'。 '：之前'和'：之後'是強大的裝飾元素，如這些。 – kunalbhat

做一些更多的研究後，我想我找到了最好的解決辦法：

h2 { 
    color: #F37A1F; 
    display: block; 
    font-family: "Montserrat", sans-serif; 
    font-size: 24px; 
    font-weight: bold; 
    line-height: 25px; 
    margin: 0; 
    text-transform: uppercase; 
} 

h2:after { 
    background: url("../images/h2.png") repeat-x center; 
    content: " "; 
    display: table-cell; 
    width: 100%; 
} 

    h2 > span { 
     display: table-cell; 
     padding: 0 9px 0 0; 
     white-space: nowrap; 
    }

改自：How can I make a fieldset legend-style "background line" on heading text?

它仍需要進行一些額外的標記，不幸的是，但它是最起碼的，我」我發現了。我可能只是寫一些jQuery自動將span添加到h2 s。

來源

2013-11-25 18:23:03 JacobTheDev

我找到了一種方法，不用在'span'標籤中包裝文本。 –

你可以做類似如下：

HTML

<div class="border"> 
    <h1>Hello</h1> 
</div>

CSS

h1 { 
    position: relative; 
    bottom: -17px; 
    background: #fff; 
    padding-right: 10px; 
    margin: 0; 
    display: inline-block; 
} 
div.border { 
    border-bottom: 1px solid #000; 
}

這裏是JsFiddle上面的代碼。

來源

2013-11-25 17:04:08 AfromanJ

-1

這是一種做法。

開始與下面的HTML：

<h1>News<hr class="hline"></h1>

，並應用以下CSS：

h1 { 
    background-color: tan; 
    display: table; 
    width: 100%; 
} 
.hline { 
    display: table-cell; 
    width: 100%; 
    padding-left: 20px; 
    padding-right: 20px; 
    border: none; 
} 
.hline:after { 
    content: ''; 
    border-top: 1px solid blue; 
    width: 100%; 
    display: inline-block; 
    vertical-align: middle; 
}

見演示在：http://jsfiddle.net/audetwebdesign/Dsa9R/

您可以重新利用hr元素後添加行文本。

這裏的優點是，您不必用其他元素包裝文本。

注意：您可以重寫CSS選擇器並避免聲明類名並保存一些輸入內容。

來源

2013-11-25 17:42:04

標記不驗證，再加上它不僅僅是使用跨度，因爲它需要額外的標記。 – JacobTheDev

用CSS在標題旁邊添加一行

回答

相關問題