CSS3是前端開發中非常重要的一部分,其中的小數點樣式可以讓網頁變得更加美觀,例如1.234567。
/* 在容器中設置字體大小和寬度 */ .container{ font-size: 1.5em; width: 2em; } /* 插入偽元素before和after */ .container:before{ content: "."; font-size: 0.5em; vertical-align: super; font-weight: bold; } .container:after{ content: "4567"; font-size: 0.5em; }
上述代碼中,我們首先在容器中設置字體大小和寬度,然后利用CSS3的偽元素before和after插入小數點和小數部分。在小數點的樣式中,我們通過設置vertical-align: super來使得小數點與數字的上部對齊,并設置了字體加粗。而在小數部分的樣式中,我們只需要設置其字體大小即可。
最終實現的效果如下:
123