Skip to content

Instantly share code, notes, and snippets.

@demonio
Created April 17, 2020 19:03
Show Gist options
  • Save demonio/da2df9dceabe2761954454526a3dd732 to your computer and use it in GitHub Desktop.
Save demonio/da2df9dceabe2761954454526a3dd732 to your computer and use it in GitHub Desktop.
Crea etiquetas que parecen etiquetas con solo añadir la clase tag a un enlace.
.tag:before {
border-top: 10px solid transparent;
border-right: 8px solid #767676;
border-bottom: 10px solid transparent;
content: "";
height: 0;
position: absolute;
top: 0;
left: -8px;
width: 0;
}
.tag {
background: #767676;
border-radius: 0 2px 2px 0;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 700;
line-height: 1.2727272727;
margin: 2px 4px 2px 10px;
padding: 3px 7px;
position: relative;
text-transform: uppercase;
}
.tag:after {
background: #fff;
border-radius: 50%;
content: "";
height: 4px;
position: absolute;
top: 8px;
left: -2px;
width: 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment