今天我们来学习如何通过CSS实现实时时间的代码。首先，我们需要创建一个HTML文件，并在其中添加一个div元素，如下所示：

<div id="clock"></div>

接下来，我们需要使用CSS来为这个div元素添加样式，使其显示时间。以下是CSS代码：

#clock {
font-size: 40px;
font-weight: bold;
text-align: center;
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 10px;
}
#clock:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #fff;
}
#clock:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #000;
}

以上代码将为div元素添加样式，包括字体大小、颜色、居中对齐等。同时，我们还使用:before和:after伪类在div元素中添加了一个圆圈和一个小圆。接下来，我们需要使用JavaScript来实现实时时间的更新。以下是代码：

function updateTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
var timeString = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").innerHTML = timeString;
}
setInterval(updateTime, 1000);

以上代码使用setInterval函数每秒调用一次updateTime函数来更新实时时间。在updateTime函数中，我们使用Date对象获取当前时间，并将小时、分钟和秒数格式化为字符串。最后，我们将时间字符串更新为div元素的内容。

完成以上步骤后，我们在浏览器中打开HTML文件即可看到实时时间的效果。这是一个简单而实用的CSS代码，对于需要在网页中展示实时时间的场景非常适用。