Another Take On Label-Design Pure CSS3 and HTML5 Markers

Posted at



<style>
[data-role="note"]{
position: relative;
font-style: italic;
margin-left: 2em;
padding-left: 50px;
}
[data-role="note"]::before {
content: attr(data-label)" "attr(data-icon);
text-transform: capitalize;

position: absolute;
top: -0.2em;
left: -1.5em;
padding: 1px 5px;

letter-spacing: 1px;
transform: rotate(-8deg);

border: 1px solid rgba(0,128,0,.8);
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0,0,0,.8) ,
-1px -1px 1px rgba(0,0,0,.4) ;
}

[data-role="note"][data-color="green"] { color: rgba(0,128,0,.9); background: rgba(221,255,221,.8); }
[data-role="note"][data-color="green"]::before{ color: rgba(255,255,255,.9); background: rgba(0,128,0,.8); }

</style>

<p data-role="note" data-color="green" data-icon="?" data-label="FIY">
The <a href="#mime-type-portion">MIME type portion</a> of a <a href="#parsable-mime-type">parsable MIME type</a>
excludes any and all <a href="#parameters">parameters</a>.
</p>





taking "icons" (Unicode supported characters) from https://icompile.eladkarako.com/useful-char-map/ :)