在CSS中，我們可以使用text-decoration屬性來設置下劃線的顏色。該屬性通常用于為文本添加裝飾效果，例如下劃線、刪除線等。

text-decoration屬性有以下幾個值：

text-decoration: none; /* 取消所有裝飾效果 */
text-decoration: underline; /* 下劃線 */
text-decoration: overline; /* 上劃線 */
text-decoration: line-through; /* 刪除線 */

如果我們想要為文本添加下劃線，并且希望下劃線的顏色不同于文本顏色，可以通過text-decoration-color屬性來實現：

/* 設置文本下劃線為紅色 */
text-decoration: underline;
text-decoration-color: red;

上述代碼會將文本下劃線設置為紅色。請注意，text-decoration-color屬性的默認值為currentColor，即與文本顏色相同。

需要注意的是，不是所有瀏覽器都支持text-decoration-color屬性。在某些舊版瀏覽器中，可能需要使用偽元素來實現文本下劃線的顏色。例如：

/* 設置文本下劃線為紅色，適用于一些不支持text-decoration-color的瀏覽器 */
text-decoration: underline;
}
/* 為偽元素添加下劃線，顏色為紅色 */
a::after {
content: "";
display: block;
height: 1px;
background-color: red;
}

上述代碼中，我們為a元素添加了一個偽元素::after，并為該偽元素添加了一個紅色的下劃線。需要注意的是，偽元素的content屬性必須設置為""，否則偽元素不會生效。

總之，text-decoration和text-decoration-color屬性可以幫助我們輕松設置文本下劃線的顏色，提升文本的可讀性和美觀度。