純css實現導航處hot小圖標實現

先上效果圖：

純css實現導航處hot小圖標實現

css代碼：

.shop{
position: relative;
}
.shop a:after{
background-color: red;
border-radius: 3px;
color: #fff;
content: "hot";
font-size: 10px;
line-height: 1;
padding: 1px 3px;
position: absolute;
right: -8px;
top: 10px;
}
代碼控制區域：

純css實現導航處hot小圖標實現

通常狀況下很多的這種小圖標使用的小圖片，這裏直接寫入css徹底控制。其中hot字樣能夠改成其餘文字，在css的content中修改。

本文連接：https://www.weguiding.com/css/433.html