<< и >> до и после текста

[yaparoff]

Нужно сделать << и >> до и после текста. Вот таким образом http://skrinshoter.ru/s/050718/7gDP7LAc?a
У меня получается как-то некорректно http://skrinshoter.ru/s/050718/lO2xSi0U
Элементы чуть приподняты. Как их выровнять?
margin-top не помогает, before и after - тоже
https://codepen.io/anon/pen/PavQWP

[AlexZaw]

Цитата

  span {
    position: relative;
    top: 3px;    
    color: green;
    font-size: 29px;
    line-height: 0;
  }

 

Пока отвлекался уже ответов надавали ?

Edited July 5, 2018 by AlexZaw

[npofopr]

position: relative;
top: 2px;

спану

[Switch74]

попробуйте

line-height: 15px;
position: relative;
top: 2px;