Another Take On Label-Design Pure CSS3 and HTML5 Markers

<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 http://icompile.eladkarako.com/useful-char-map/ :)