在Web開發中，進度條是一個非常常見的UI元素，可以用來展示任務的進度、加載數據的進度等。在CSS中，我們可以使用偽元素和動畫屬性來創建一個簡單的進度條。本文將介紹如何通過CSS創建進度條，并將進度條上的文字顯示出來。

<style>
.progress {
position: relative;
height: 20px;
border: 1px solid #999;
background-color: #fff;
}
.progress::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background-color: #00bfff;
animation: progressAnimation 5s linear;
}
@keyframes progressAnimation {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.progress::after {
content: attr(data-progress);
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="progress" data-progress="20%"></div>

上述代碼中，我們創建了一個div元素，具有.progress類。該元素的高度為20px，邊框為1像素的灰色邊框，背景色為白色。使用偽元素:before來創建進度條，它擁有一個高度等于父元素高度的背景色，寬度初始為0，并具有動畫效果，動畫時間為5s。通過關鍵幀動畫progressAnimation，我們將進度條的寬度從0%逐漸變為100%。偽元素:after用來在進度條上顯示百分比文字，這里我們使用了“attr”CSS函數將data-progress屬性值作為內容來顯示。

在HTML中，我們只需要為progress元素定義data-progress屬性，就可以實現進度條與進度文字的關聯了。例如：

<div class="progress" data-progress="50%"></div>

這樣就可以創建一個50%的進度條，同時在進度條的末尾以文字形式顯示當前進度。

總之，通過CSS我們可以輕松創建帶有進度文字的進度條，這些無疑可以提高用戶體驗，使網站更加友好醒目。在實際開發中，你可以根據實際需求自定義進度條的顏色、高度等樣式，以展示最好的效果。