Hex symbols in a data attribute

by neonDog

HTML

test<br>
 <div class="anchor-tag" data-foo='First line Second Line'></div>
 
  test<br>
 <div class="anchor-tag" data-foo='First line Seconsdsadasd Line'></div>
 
  test<br>test<br>
 <div class="anchor-tag" data-foo='First line Second Line'></div>

SCSS

.anchor-tag {
  width:100%;
  height:2px;
  background: blue;
  position: relative;
  font-size: 14px;
  
  &::after {
      content: attr(data-foo);
      background-color: blue;
      color: white;
      position: absolute;
      right: 0;
      top: -10px;
      padding: 2px 4px;
      border-radius: 5px;
  }
  
  &:hover::after {
    background-color: red;
  }
}

JavaScript

http://jsfiddle.net/neonDog/cb3jt8dh/7/#http://jsfiddle.net/neonDog/cb3jt8dh/7/#