先介紹一下偽元素這個東西，為什麼稱呼這東西叫做偽元素呢？簡單來說，偽元素並不存在於標準的 HTML 元素當中，而是跟隨在每個元素裡頭，一前一後共有兩個，分別是::befor和::after，當我們在 CSS 裡頭寫出a::before或a::after的時候，就等同於在這個 a 元素的前後加上了兩個假的元素，我們就可以更靈活的去針對 a 元素做變化。 ( 可以看看下面這張圖和對應的程式碼就比較清楚 )
.a{
width:100px;
height:50px;
background:red;
position:relative;
color:#fff;
}
.a::before{ /* 藍色的 before 區塊 */
content:'before';
width:50px;
height:50px;
background:blue;
display:block;
position:absolute;
top:0;
left:-50px;
}
.a::after{ /* 綠色的 after 區塊 */
content:'after';
width:50px;
height:50px;
background:green;
display:block;
position:absolute;
top:0;
right:-50px;
}
比較需要注意的，偽元素一定要加上content:'';的屬性，這個屬性是讓我們可以在偽元素直接填入純文字內容，也 可以使用像 alert 一樣的換行語法，這個值基本上都可以為空，但你也可以使用它搭配 HTML5 的 data attributes，就能做出更多的互動變化，也因為偽元素原本是 inline 的屬性，我們若要讓它俱有長寬，就要將其改為 block 或 inline-block。此外，如果要精准控制偽元素的位置，可以把本體的 position 設為 relative，偽元素的 position 設為 absolute，就可以由 top、left、right、bottom 控制位置。
了解了基本的偽元素之後，就可以做出這個時鐘效果了嗎？當然是不行呦～我們還必須要先了解邊框 ( border ) 的概念，如果今天一個正方形的長寬都是 0，但四個邊都有 10px 的寬度，出來的樣子就會像下圖這樣
.b{
width:0;
height:0;
border-width:20px;
border-style:solid; border-color:red blue green yellow; /* 上右下左，順時針方向四個邊 */
}
我們如果把邊框的底色設為透明，就可以輕鬆地做出三角形的效果，當然如果搭配 CSS3 的旋轉或變形，就可以做出更多形狀的變化。
.c{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:rgba(0,0,0,0) rgba(0,0,0,1); /* 上下、左右 */
}
搭配本體的元素，就能夠做出箭頭。
.d{
width:100px;
height:50px;
background:rgba(255,200,0,1);
position:relative;
}
.d::after{
content:' ';
width:0;
height:0;
border-width:25px;
border-style:solid;
position:absolute;
top:0;
right:-50px;
border-color:rgba(255,200,0,0)
rgba(255,200,0,0)
rgba(255,200,0,0)
rgba(255,200,0,1);
/* 上右下三個邊的邊框顏色是透明的 */
}
基本知識都都了解了之後，我們只要把各個箭頭 ( 總共七個 ) 組成八的形狀，就可以做出像液晶電子數字的 8 。
.clock{
margin:20px;
}
.show-time{
position:absolute;
}
.clock span {
display: block;
width: 6px;
height: 20px;
background: #000;
position: relative;
-webkit-transition:.3s; /* 改變數字的時候有淡入淡出的效果 */
transition:.3s;
box-shadow:-1px 1px 5px rgba(0,0,0,.6); /* 讓液晶數字有陰影，有浮起來的效果 */
}
.clock span.s1,.clock span.s4,.clock span.s7 { /* 水平的黑色條 */
width: 20px;
height: 6px;
}
.clock span::before, .clock span::after { /* 偽元素的基本樣式 */
content:' ';
position: absolute;
border: 3px solid rgba(0, 0, 0, 0);
width:0;
height:0;
}
.clock span.s1 { /* 水平黑色條 */
}
.clock span.s2,.clock span.s5 { /* 垂直黑色條 */
margin-top:1px;
margin-left:-7px;
}
.clock span.s3,.clock span.s6 { /* 垂直黑色條 */
margin-top:-20px;
margin-left:21px;
}
.clock span.s4,.clock span.s7 { /* 水平黑色條 */
margin-top:1px;
}
/* 左方三角 */
.clock span.s1::before, .clock span.s4::before, .clock span.s7::before {
top:0px;
left: -6px;
border-right-color:#000;
}
/* 右方三角 */
.clock span.s1::after, .clock span.s4::after, .clock span.s7::after {
right: -6px;
border-left-color:#000;
}
/* 上方三角 */
.clock span.s2::before, .clock span.s3::before, .clock span.s5::before, .clock span.s6::before {
top: -6px;
border-bottom-color: #000;
}
/* 下方三角 */
.clock span.s2::after, .clock span.s3::after, .clock span.s5::after, .clock span.s6::after {
bottom: -6px;
border-top-color: #000;
}
接著只要在針對不同的數字，讓不同的箭頭消失，就可以做出 0~9 的數字效果。
.clock-1 span.s1,.clock-1 span.s2,.clock-1 span.s4,.clock-1 span.s5,.clock-1 span.s7{
opacity:0;
}
.clock-2 span.s2,.clock-2 span.s6{
opacity:0;
}
.clock-3 span.s2,.clock-3 span.s5{
opacity:0;
}
.clock-4 span.s1,.clock-4 span.s5,.clock-4 span.s7{
opacity:0;
}
.clock-5 span.s3,.clock-5 span.s5{
opacity:0;
}
.clock-6 span.s3{
opacity:0;
}
.clock-7 span.s2,.clock-7 span.s4,.clock-7 span.s5,.clock-7 span.s7{
opacity:0;
}
.clock-8{
}
.clock-9 span.s5{
opacity:0;
}
.clock-0 span.s4{
opacity:0;
}
會做這些效果之後，只需要再利用 JS 抓取電腦時間，加上其他的 CSS 排版，就能做出非常擬真的電子時鐘囉！
線