在CSS中，我們可以使用text-decoration屬性來創建下劃線。但是，在實際應用中，可能會發現下劃線比字體要長。

例如：

p {
text-decoration: underline;
}

在上面的代碼中，我們給p元素添加了下劃線樣式。然而，實際網頁中下劃線可能會比文字的長度要長。

造成這種情況的原因是，瀏覽器在繪制下劃線時，會在文字的基線下方一定距離（通常為半個字母的高度）處開始繪制線條，而線條的長度會一直延伸到單元格或容器的邊緣。

為了讓下劃線長度能夠與文字匹配，我們需要給下劃線添加一些調整：

p {
text-decoration: underline;
text-underline-position: under;
text-underline-offset: 2px;
}

在上面的代碼中，我們添加了兩個屬性來調整下劃線的位置和偏移量：

• text-underline-position: under;

  表示將下劃線置于文字下方。

• text-underline-offset: 2px;

  表示將下劃線向上偏移2個像素。

這樣就可以讓下劃線長度與文字匹配。在實際應用中，可以根據具體情況來調整偏移量。