我正在嘗試使用 after 偽元素創建帶下劃線的標題，但是在元素寬度較大的情況下會出現問題。
使下劃線大于文本，我想知道如何使元素成為文本的大小，因此不必固定大小。
* {
box-sizing: border-box;
}
.c-title {
position: relative;
text-transform: uppercase;
font-size: 1.2em;
}
.c-title::after {
content: "";
width: 100%;
height: .2em;
background-color: var(--c-title-underline-color);
position: absolute;
bottom: -2px;
left: 0;
}<h1 class="c-title">text...</h1>uj5u.com熱心網友回復：
您的顏色變數未包含在 CSS 代碼中。所以使用background而不是background-color. 而已。
* {
box-sizing: border-box;
}
.c-title {
position: relative;
text-transform: uppercase;
font-size: 1.2em;
width: fit-content;
}
.c-title::after {
content: "";
width: 100%;
height: .2em;
/* background-color: var(--c-title-underline-color); */
background: red;
position: absolute;
bottom: -2px;
left: 0;
}<h1 class="c-title">text...</h1>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511117.html
標籤：htmlcss网络
上一篇：針對整個檔案的Onclick事件