ECサイト お知らせのバッチ表示

TPL

<div class=”news”>

<a href=”news/list/”>

<span class=”news-badge”>!</span>

</a>

</div>

CSS

.news-badge {
margin-top: -25px;
box-sizing: border-box;
min-width: 14px;
height: 14px;
padding: 0 5px;
border-radius: 500px;
vertical-align: middle;
background: #DF355F;
color: #fff!important;
font-size: 12px!important;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 0;
}

@media (max-width: 959px) {
.news-badge {
margin-top: -15px;
margin-left: 5px;
}
}

＜新米デザイナー アピコ＞