html 使用数据属性和内容CSS创建UI徽章

Posted 2021-05-11

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$echo_primary: #FF6625;

[data-notification] {
  &:after {
    display: block;
    text-align: center;
    content: attr(data-notification);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: $echo_primary;
  }
}

<a href="#" rel="docs" data-notification="3">docs</a>