先上效果图:

纯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