我想在我的 h1 標題下添加一個下劃線，讓它比標題本身短一點。應從兩端移除 30px 空間。如何解決這個問題？
<h1>Heading</h1>
h1 {
border-bottom: 2px solid #000000;
width: fit-content;
}
uj5u.com熱心網友回復：
h1 {
position: relative;
display: inline-block;
}
h1:after {
content: "";
width: calc(100% - 60px);
height: 100%;
position: absolute;
left: 30px;
border-bottom: 2px solid black;
}<h1>Heading</h1>一種方法是使用 ::after 元素。使用左移 30 像素。
uj5u.com熱心網友回復：
如果標題很長并且溢位到另一條（較短的）行，這有點取決于您想要做什么，但是假設您實際上只想要一個縮短 60px 的邊框，那么您可以添加一個相同高度但寬度較小的 before 偽元素.
h1 {
width: fit-content;
position: relative;
--indent: 30px;
}
h1::before {
width: calc(100% - (2 * var(--indent)));
height: 100%;
content: '';
position: absolute;
top: 0;
left: var(--indent);
;
border-bottom: 2px solid #000000;
}<h1>Heading</h1>此代碼段定義了一個具有所需縮進 (30px) 的變數，因此您可以在需要時輕松更改它。
uj5u.com熱心網友回復：
您可以通過背景偽造下劃線并通過背景大小縮短它：
這是這個想法的一個例子：
h1 {
background: linear-gradient(to top, #000000 0 2px, transparent 2px) 50% 0 / calc(100% - 60px) 100% no-repeat;
width: fit-content;
}
h2 {
color: green;
margin: auto;
background: linear-gradient(to top, currentColor 0 2px, transparent 2px) 50% 0 / calc(100% - 60px) 100% no-repeat;
width: fit-content;
}
h2 h2 {
color: tomato;
line-height: 0.95em;
transition:0.25s
}
h2 h2:hover {line-height:1.6em;}<h1>Heading</h1>
<p>extras for infos</p>
<h2>Match colors via currentColor</h2>
<h2>move that fake underline closer or further away</h2>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465718.html
下一篇：如何防止HTML選項溢位？