只有一個元素的雙邊框

我試圖得到一個雙邊框（帶下劃線的）標題。第一個是全寬，第二個是文本寬度。的邊界應該重疊有一個簡單的解決方案與象嵌套兩個元件：只有一個元素的雙邊框

<h1><span>Title</span></h1>

和CSS：

h1 { 
    border-bottom: 1px solid red; 
} 

h1 span { 
    display: inline-block; 
    padding: 0 0 10px; 
    margin-bottom: -1px; 
    border-bottom: 1px solid blue; 
}

跨度具有inline-block顯示屬性，因此它具有合適的寬度。

我不知道是否有可能獲得與:after同樣的效果，:before選擇只有h1元素。

來源

2013-09-22 Łukasz Pijet

這是可以做到。我已使用vw單位。

看看這個Working Fiddle

HTML：

<h1 class="SpecialBorder">Title</h1>

CSS：

* 
{ 
    margin: 0; 
    padding: 0; 
} 
.SpecialBorder 
{ 
    display: inline-block; 
    position: relative; 
} 
.SpecialBorder:before , .SpecialBorder:after 
{ 
    content:''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 
.SpecialBorder:before 
{ 
    width: 100vw; 
    border-bottom: 1px solid red; 
} 
.SpecialBorder:after 
{ 
    width: 100%; 
    border-bottom: 1px solid blue; 
}

說明： 的before & after僞元素是繪製邊界的元素。他們都是空的元素。具有一定的寬度，導致其邊框可見。

他們絕對在他們的父母的底部位置。

before：負責紅色邊框。所以他的寬度設置爲視口的'100％'。 after：負責紅色邊框。因此HES寬度被設定爲他的父母（該<h1>）的100%，這就是爲什麼h1被置'顯示：內聯塊;」（因此將跨越ONY就像他的內容）

vw單元由支持new browsers only。

請注意，如果您不能使用vw單位，您仍然可以對此有所瞭解。刪除h1的display:inline-block;（使其再次跨越一路）的before寬度改爲100%（使它跨越一路）， after的與更改爲您所選擇的一些固定值。

編輯：爲thgaskell中日評論說，

還有的地方時，窗口大小vw單位不正確WebKit的瀏覽器更新的錯誤。

編輯2： 製作元素顯示標題後，您可以使用一個<br />標籤，或清除技術，如顯示here。

來源

2013-09-23 08:21:05 avrahamcool

一個有趣的方法，但你應該解釋它是如何工作的，並澄清它的工作條件（瀏覽器覆蓋）; 「CSS3」只是規格和草稿的集體名稱。 –

@ JukkaK.Korpela編輯我的答案更多的解釋。 – avrahamcool

值得一提的是，當窗口被調整大小時，有一個錯誤，其中'vw'單元在webkit瀏覽器上無法正確更新。 – thgaskell

我不知道如果這是你想要的，但你可以做下列規則：

h1 { 
    ... 
} 

/* here are the direct children of every h1 */ 
h1>* { 
    ... 
}

::after和::before選擇是明智當插入新的內容（注意雙冒號）。下面是一些關於MDN選擇::after和一些例子：

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

來源

2013-09-22 23:56:58 Tomalla

如果'h1'沒有孩子，爲'h1> *'添加規則不起作用，問題是隻使用一個元素。 –

但我認爲這是關鍵？如果'h1'沒有孩子，你應該如何強調內容？你想強調什麼？ *假設*在這種情況下不起作用。它使用**樣式表中的一個元素** - 它只使用'h1'元素。這是我第一次閱讀時想到的。如果作者的意思是在文檔中只使用一個元素，他可能會更具體，確實如此。 – Tomalla

只有一個元素的雙邊框

回答

相關問題