CSS中常常需要選中某個(gè)元素的子元素,比如選中圖片的右下角加上一個(gè)打勾的效果,這個(gè)可以通過以下代碼實(shí)現(xiàn):
.post-thumbnail { position: relative; display: inline-block; } .post-thumbnail::before { content: ''; position: absolute; top: 80%; left: 68%; transform: translate(-50%, -50%) rotate(-45deg); width: 20px; height: 10px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; }
上面的代碼中,我們首先為包含圖片的元素設(shè)置了相對(duì)定位,然后使用偽類:before選中了圖片元素的子元素,并設(shè)置了偏移量和旋轉(zhuǎn)角度,最后使用CSS的相關(guān)屬性調(diào)整大小和邊框,從而實(shí)現(xiàn)了選中圖片右下角打勾的效果。