CSS是一種常用于網頁設計中的樣式語言。在網頁設計中，經常會用到下劃線來強調文本內容，但是有時候默認的下劃線長度不夠合適，需要根據需要進行調整。那么CSS下劃線怎么設置長度呢？下面我們來介紹幾種設置方式。

1. 使用text-decoration屬性設置下劃線長度：

.text-underline{
text-decoration: underline dotted;
text-decoration-color: red;
text-decoration-thickness: 3px;
text-underline-offset: 10px;
}

以上代碼可以設置文本下劃線的樣式、顏色、粗細和偏移量，可以根據實際需要進行調整。

2. 使用border-bottom屬性設置下劃線長度：

.text-underline{
border-bottom: 3px dotted red;
}

以上代碼可以設置文本下方的邊框樣式、顏色和粗細，實現下劃線的效果。同樣可以根據實際需要進行調整。

3. 使用偽元素:before或:after來實現下劃線的長度控制：

.text-underline:before{
content: "";
display: block;
height: 3px;
width: 50%;
background: blue;
}

以上代碼可以在文本前插入一個空的塊級元素，利用其背景色填充實現下劃線的效果，并且可以控制該偽元素的長度。同樣可以根據實際需要調整長度。

綜上所述，CSS下劃線的長度可以通過以上幾種方式進行控制，可以根據實際需求選取適用的方法。希望本文對大家有所幫助。