Smart Variable implementation

by Sitebase Mostmans

HTML

<div contentEditable="true">
Hello world,

This is a little variable test called: <span class="variable" data-content="Hello world" contentEditable="false">{{ my.variable }}</span>. I hope you like it.
</div>

CSS

body {
  background: #fff;
  font: 14px/18px Helvetica, Arial, sans-serif;
}
.variable {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  background: #1C90F3;
  text-indent: -999px;
	line-height:0;
}
.variable:after {
  content: attr(data-content);
  display: block;
  line-height: initial;
  text-indent:0;
}