Last Updated: February 25, 2016
·
586
· manudwarf

Header labels in CSS3

Hey buddies !

So, I had this h1, and I wanted to display "NEW" aside like this :
Picture

I found a simple way of proceeding without any image, pure CSS. Eventually, it was less complicated than I expected...

h1:after {
    background: #116111;
    border-radius: 2px;
    color: #fefefe;
    content: "NEW";
    font-size: 8px;
    margin-left: 5px;
    padding: 0 3px;
    vertical-align: super;
}

This is a "classic" CSS version, I did a simple mixin in SASS to make it even easier to use ;)