CSS中也可以插入時間,一般通過在偽元素中添加content來實現。
:before { content: "現在時間是:" attr(data-time); }
以上代碼可以在元素前面插入一段文字,顯示為“現在時間是:”,后接data-time屬性傳入的具體時間。
需要注意的是,data-time屬性的值需要在HTML中先定義好。
<div data-time="12:30">這是一個例子</div>
除此之外,還可以通過JavaScript實現動態插入時間的效果,例如:
.time::after { content: attr(data-time); } // JavaScript setInterval(function() { var time = new Date().toLocaleTimeString(); document.querySelector('.time').setAttribute('data-time', time); }, 1000);
以上代碼使用了setInterval定時器,每秒鐘更新一下.time偽元素的data-time屬性。然后在CSS中使用content屬性插入時間即可。
上一篇css中時間和日期
下一篇css中怎樣設置字體