Как реализовать фон перед и после элемента чтобы его части выравнивались по высоте элемента?

Question

[Александр Андреев]

На сайте есть элементы типа вот этого joxi.ru/Vrwow4zIOvXDNr ссылка с картинками (красивыми загагулинами) до и после текста ссылки. Как их правильно сделать. Попытался чезез псевдокламмы :before и :after но в случае с надписью в две строки получается вот такая штука joxi.ru/eAOqKQWHxEa8gm (в одну строку всё ок joxi.ru/8AnXwebhj0ReYm ) . Стиль делаю такой:

//Сам элемент
.important_url {
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  color: #FAECCC;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

//Загагулина слева
.important_url.violet:before {
	content: "";
	display: inline-block;
	width: 51px;
	height: 15px;
	background-image: url("../img/icon-simbol-left-violet.png");
	background-repeat: no-repeat;
}

//Загагулина справа
.important_url.violet:after {
	content: "";
	display: inline-block;
	width: 51px;
	height: 15px;
	background-image: url("../img/icon-simbol-right-violet.png");
	background-repeat: no-repeat;
}

Answer 1

[Олег]

http://codepen.io/werty1001/pen/zZGWJz

Answer 2

[Егор Живагин]

Да, через псевдоэлементы, только с position: absolute , ну, и стандартными выравниваниями -

top: 50%;
transform: translateY(-50%);

left/right отдельно каждой "загогулине" ) По-крайней мере я бы так пробовал