【CSS3】CSSだけで表現できるタグ風タグ

こんなの

beforeで白丸を、

afterで三角形を作っている。

.my-tag{
background-color: rgb(118, 118, 118);
border-radius: 0px 2px 2px 0px;
color: rgb(255, 255, 255);
display: inline-block;//タグを一列に表示するため
font-size: 11px;
font-weight: 700;
line-height: 1.27273;
margin: 2px 4px 2px 10px;
padding: 3px 7px;
position: relative;
text-transform: uppercase;
}
.my-tag:before{
border-top: 10px solid transparent;
border-right: 8px solid rgb(118, 118, 118);
border-bottom: 10px solid transparent;
content: "";
height: 0px;
position: absolute;
top: 0px;
left: -8px;
width: 0px;
}
.my-tag:after{
background-color: rgb(255, 255, 255);
border-radius: 50%;
content: "";
height: 4px;
position: absolute;
top: 8px;
left: -2px;
width: 4px;
}