Как сделать, чтобы при наведении на ссылку она не только подчеркивалась нестандартно, но и с двух сторон выскакивало по рисунку?

Question

[Алексей]

Здравствуйте, нужно, чтобы при наведении на ссылку, было такое жирное подчеркивание (скорей всего растянутый пиксель по длине блока) и по бокам появлялись две завихрушки. Каким образом это сделать с помощью css ? или тут еще нужно jquery ? подскажите пожалуйста
Вот такое должно получиться:


и вопрос еще в догонку. Как грамотней сделать, чтобы для h1 тега автоматом подставлялись вот такие штучки:

Answer 1

[Mr Crabbz]

добавьте элементы :before и :after для .class:hover, а для них - background

Comments

[Алексей]

спасибо, сделал, но теперь когда добавляются эти элементы - меню горизонтальное съезжает, а нужно чтобы эти элементы никак не влияли на позицию ссылок: joxi.ru/eAOq8p0f5lw5mo

[littleguga]

Алексей: 1. Вы хотите, чтобы завихрушки накладывались на ссылки или что?
2. Залейте код с версткой на jsbin/jsfiddle

[Mr Crabbz]

Как выше указали, position: relative для ссылки и position:absolute для элементов. Для левого добавляем left:-24px (мне 24 - ширина вашей завихрушки), для правого: right:-24px (тоже самое).

При position:absolute элемент, к которому применили это свойство, «выпадает» из главного стека размещения элементов и не будет влиять на другие элементы страницы.

[Mr Crabbz]

Примерно вот так в общем: jsfiddle.net/4Lj2nqce