我想在我的標題上有一個小的頂部邊框。我用::before偽做了這個，但標題高度現在因為它的絕對定位而搞砸了。標題之后的任何元素都會忽略標題高度，因為絕對元素當然會從檔案流中洗掉。
有沒有更好的方法來實作這種外觀和感覺并保持航向高度？最好不用定位？
h3 { position: absolute; }
h3:before {
position: relative;
margin-top: -5px;
content:'';
position: absolute;
background-color: #C70021;
width: 20%;
height: 3px;
top: 0;
left:0;
}<h3>My Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis nunc malesuada, aliquam leo nec, auctor sem</p>uj5u.com熱心網友回復：
- 要
position: absolute;在子框上使用，例如::beforeor::after或任何后代元素，父級只需要position: relative;（而不是默認值position: static;）。- 所以你不需要
position: absolute;在h3.
- 所以你不需要
- 順便說一句，您的
h3::before規則中還設定了冗余屬性。
h3 {
position: relative;
}
h3::before {
margin-top: -5px;
content: '';
position: absolute;
background-color: #C70021;
width: 20px;
height: 3px;
top: 0;
left:0;
}<h3>My Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis nunc malesuada, aliquam leo nec, auctor sem</p>但是，存在替代方法，例如，這更簡單：
h3::first-letter {
text-decoration: overline #C70021;
text-decoration-thickness: 3px;
}<h3>My Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis nunc malesuada, aliquam leo nec, auctor sem</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432856.html
標籤：css
上一篇：如何在網頁中間對齊文本區域