如何在css中標題之前和之後顯示水平線

我想在css中設置html標題的樣式，但沒有得到正確的結果，因爲我的jsfiddle顯示：https://jsfiddle.net/Nadjanara/nmo0245t/。以下是HTML和CSS代碼：如何在css中標題之前和之後顯示水平線

<h2><span>Heading2</span></h2> 

h2{ 
    width:100%; 
    text-align:center; 
    border-bottom: 1px solid #000; 
    line-height:0.1em; margin:10px 0 20px; 
} 
h2 span{ 
    padding:0 10px; 
}

我怎麼只能把之前的水平線和標題後也控制了線的寬度，使這種不佔用的全寬屏幕？

來源

2016-07-05 Nadj

明顯有很多方法可以實現您的目標。但是像this這樣的東西呢？

h1 { 
 
    font-size: 4rem; 
 
} 
 
h1::before, 
 
h1::after { 
 
    display: inline-block; 
 
    content: ""; 
 
    border-top: .3rem solid black; 
 
    width: 4rem; 
 
    margin: 0 1rem; 
 
    transform: translateY(-1rem); 
 
}

<h1>Heading</h1>

來源

2016-07-05 22:09:38 Jonathan

確實。它看起來比它更好。但是仍然存在兩個問題：線條與標題太靠近了。而且這條線有點拋到了頂端，而不是在中間顯示出來：例如p ---- – Nadj

因此，對轉換百分比和邊距進行調整。所有你需要做的是獲得正確的相對比例，你就完成了 - 不需要更多的調整。 – Jonathan

@Nadj。像喬納森說的。只需添加一個保證金 - 左側和右側。將變換轉換爲90％，並與時間同步。檢查jsfiddle：https：//jsfiddle.net/Wosley_Alarico/fkrc15mh/ –

給這個鏡頭！一個pseduo元素將是你最好的選擇。你可以將行的寬度更改爲任何你需要的寬度，但是對於這個例子我使用了500px。

h2{ 
    text-align:center; 
    line-height:0.1em; 
    position:relative; 
    margin:10px 0 20px; 
    background:#FFF; 
} 
h2 span{ 
    background:#FFF; 
    z-index:2; 
    position: relative; 
} 
h2:before{ 
    content:''; 
    position:absolute; 
    display:block; 
    top:50%; 
    height:1px; 
    width: 500px; 
    background:#000; 
    left:50%; 
    z-index:1; 
    transform:translateX(-50%); 
    -webkit-transform:translateX(-50%); 
}

來源

2016-07-05 21:27:41 will

它變得更好，現在我可以控制線的整個寬度。但問題依然存在，因爲我無法在標題和行間（左側和右側）之間留出空間。例如：------標題-----。而不是----------標題------------ – Nadj

如何在css中標題之前和之後顯示水平線

回答

相關問題