购物车数量文本框html代码,CSS 购物车按钮右上角添加角标显示购物车数量

刚才帮一个朋友项目实现了一个功能，购物车按钮上追加角标，显示购物车数量。

这完全是一个 CSS 问题，这里记录一下，方便下次直接拿来用。

先上效果图

然后上代码

HTML dom 部分

CSS 代码

/*购物车角标数字*/

.nav-counter {

position: absolute;

top: 11px;

right: -8px;

min-width: 8px;

height: 20px;

width: 20px;

line-height: 19px;

margin-top: -11px;

font-weight: normal;

color: white;

text-align: center;

text-shadow: 0 1px rgb(0 0 0 / 20%);

background: #e23442;

border: 1px solid #911f28;

border-radius: 10px;

background-image: -moz-linear-gradient(top, #e8616c, #dd202f);

b