本文將介紹如何使用CSS創(chuàng)建藍色帶下劃線的效果。

/* 定義樣式 */
.blue-underline {
text-decoration: none; /* 刪除默認下劃線 */
position: relative; /* 為偽元素提供定位 */
}
.blue-underline::after {
content: ''; /* 必填，否則內(nèi)容區(qū)域為空 */
position: absolute; /* 將偽元素從文檔流中移除 */
left: 0;
bottom: -2px; /* 接近文本底部的位置 */
width: 100%;
height: 2px; /* 下劃線高度 */
background-color: blue;
}

在HTML中，我們可以將這個樣式應(yīng)用到任何帶下劃線的元素。例如：

<p class="blue-underline">這是一個帶藍色下劃線的段落。</p>
<a href="#" class="blue-underline">這是一個帶藍色下劃線的鏈接。</a>

使用這個樣式，我們可以輕松地給文本添加漂亮的下劃線效果。