CSS字體底部加橫線是網頁設計中常見的一種效果，它可以用來突出文字的重要性、高亮關鍵信息等。在實現這種效果時，可以使用CSS屬性text-decoration和border-bottom，具體的代碼如下：

p {
text-decoration: underline;
border-bottom: 1px solid #000;
}

上面的代碼中，text-decoration屬性給文字添加下劃線效果，而border-bottom屬性則給下劃線添加一條1像素的實線邊框。需要注意的是，在實現這種效果時要考慮不同字號下的線條粗細，可以使用em或rem等相對單位來設置border-bottom屬性的寬度。

除了傳統的下劃線效果外，CSS還提供了其他幾種效果，如虛線、雙下劃線、波浪線等。可以使用text-decoration-style和text-decoration-color屬性來設置這些效果，具體的代碼如下：

p {
text-decoration: underline dotted;
text-decoration-color: red;
}

上面的代碼中，text-decoration-style屬性設置為dotted，即虛線效果，而text-decoration-color屬性設置為紅色。需要注意的是，不同瀏覽器對text-decoration的支持可能不一致，在具體應用時需要進行兼容性測試。