「分享」自定义CSS实现另一种标签风格

[loudtell]

效果：

自定义代码：

.tag-span {
    font-family: Helvetica, Arial, sans-serif;
    background: #16A34A;
    display: inline-block;
    position: relative;
    padding: 3px 5px 3px 5px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin: 0 15px 0 0;
    text-decoration: none;
font-size: small;line-height: 1;color: rgb(250 250 250 / 1) !important;
}
 
.tag-span:hover {
    background-color: #166534;
}
 
.tag-span:before {
    background: #fff;
    width: 5px;
    height: 8px;
    content: "";
    display: inline-block;
    border-radius: 20px;
    margin: 0 5px 0 0;
}
 
.tag-span:after {
    display: inline-block;
    border: 9.5px solid;
    border-color: transparent transparent transparent #16A34A;
    height: 0;
    width: 0;
    position: absolute;
    right: -19px;
    top: 0;
    content: "";
    display: inline-block;
}
.tag-span:hover:after {
    border-color: transparent transparent transparent #166534;
}