CSS可以幫助我們在網頁中顯示當前時間。使用JavaScript可以實現相同效果，但是使用純CSS去實現當前時間是一種非常流行的方法。
首先，我們需要創建一個HTML頁面。我們會在頁面中使用一個pre標簽來顯示當前時間。在頁面中添加下面這段代碼：
<!DOCTYPE html> <html> <head> <title>顯示當前時間</title> </head> <body> <pre id="clock"></pre> </body> </html>
接下來，我們將使用CSS來設置pre標簽的樣式和當前時間的顯示效果。在CSS文件中，我們將為pre標簽添加以下樣式：
#clock {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}我們首先設置了字體和字體大小，然后將文本居中對齊，最后為pre標簽添加了一些上下邊距，以使其在頁面中更加美觀。
現在，我們需要為pre標簽添加一個:before偽元素來顯示當前時間，這可以通過設置content屬性和使用JavaScript Date對象實現。在CSS文件中，添加以下代碼：
#clock:before {
content: attr(data-time);
}
#clock:before {
content: attr(data-time);
}
setInterval(function() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").setAttribute("data-time", time);
}, 1000);我們首先為:before偽元素的content屬性輸入了一個data-time屬性。接著，我們使用JavaScript中的setInterval函數來獲取當前時間，并將其格式化為“時:分:秒”的形式。最后，我們設置data-time屬性的值為當前時間，并將此值賦給:before偽元素的content屬性。在setInterval函數中，我們設置計時器以每秒鐘更新一次當前時間。
通過使用CSS和JavaScript的結合，我們現在可以在網頁上直接顯示當前時間。這種方法實現簡單且易于讀取和維護。