使用CSS實現(xiàn)小亮點其實非常簡單,只需要使用偽元素:after或:before即可。比如下面這段代碼:
.highlight { position: relative; } .highlight:after { content: ""; position: absolute; top: 50%; right: 0; width: 10px; height: 10px; border-radius: 50%; background-color: yellow; transform: translate(-50%, -50%); }
這個代碼塊就是在一個類名為highlight的元素后添加了一個偽元素after,用來實現(xiàn)小亮點。下面我們依次解釋每一行的CSS代碼:
1、position: relative; 表示設(shè)置highlight的position屬性為相對定位,這是為了后面的絕對定位做鋪墊。
2、content: ""; 表示設(shè)置偽元素的內(nèi)容為空。
3、position: absolute; 表示設(shè)置偽元素的position屬性為絕對定位,這是為了相對于highlight定位。
4、top: 50%; 表示設(shè)置偽元素相對于highlight元素頂部的位置為50%。
5、right: 0; 表示設(shè)置偽元素相對于highlight元素右側(cè)的位置為0。
6、width: 10px; height: 10px; 表示設(shè)置偽元素的寬度和高度為10px。
7、border-radius: 50%; 表示設(shè)置偽元素為圓形。
8、background-color: yellow; 表示設(shè)置偽元素的背景顏色為黃色(可以根據(jù)需要自行更改)。
9、transform: translate(-50%, -50%); 表示在中心對齊偽元素。
最后我們在HTML中給需要加亮點的元素添加類名highlight即可。