CSS是一種用于美化網頁的樣式語言，它可以控制文本、圖片、頁面布局等多個方面。但是，CSS本身并不支持獲取系統時間，我們必須借助JavaScript來實現這個功能。

不過，我們可以通過CSS的:before和:after等偽元素來插入一些額外的文本內容，而這個文本內容可以通過JavaScript動態生成，從而實現在網頁中顯示系統時間的效果。

/* 在CSS中創建偽元素 */
.clock:before{
/* 在偽元素前面插入文本 */
content: "現在時間是：";
/* 設置文本的樣式 */
font-size: 18px;
font-weight: bold;
color: #333;
}
/* 在JS中動態生成時間 */
function getTime(){
var date = new Date();  //創建一個Date對象
var hour = date.getHours(); //獲取當前小時數
var minute = date.getMinutes(); //獲取當前分鐘數
var second = date.getSeconds(); //獲取當前秒數
/* 將時間格式化為規定的格式 */
hour = hour< 10 ? "0" + hour : hour;
minute = minute< 10 ? "0" + minute : minute;
second = second< 10 ? "0" + second : second;
return hour + ":" + minute + ":" + second; //返回格式化后的時間
}
/* 將生成的時間插入到偽元素的after中 */
.clock:after{
content: getTime(); //動態插入時間
font-size: 18px;
color: #f00;
}

其中，類名為clock的元素即為我們要顯示時間的元素。通過before偽元素插入“現在時間是：”文本，通過after偽元素插入由JS動態生成的時間。而JS代碼中，我們使用Date對象獲取當前時間，并將其格式化為“時：分：秒”的格式。