Можно ли сделать крутой эффект по наведению на двустрочную ссылку?

Question

[#FFFFFF]

Всем привет!
Дизайнер попросил сделать какой-нибудь интересный эффект на ховер ссылок по типу codepen.io/tanotify/full/EriCD (наведите на Normal link). Но тут проблема - для ссылок в 1 строку всё супер, но в реальности ссылки зачастую встают в 2 строки, при длинном тексте либо узком экране.
Есть ли какая-то возможность сделать "креативный" ховер на ссылку, чтобы это всегда прилично выглядело? Кроме плавного появления, такое чувство, что ничего нельзя сделать...

Comments

[Евгений]

А если ссылке поставить white-space: nowrap; ?

[Олег]

Что подразумевается под словом приличный? Смешно, что дизайнер предлагает такой бред.

[#FFFFFF]

Евгений: это не подразумевается, ссылка должна при необходимости переходить на новую строку

[#FFFFFF]

Олег: видимо, дизайнер подразумевает, что подобный эффект должен работать на ссылке в 2 строки. Прежде чем сказать ему, что это невозможно, решила поинтересоваться здесь, вдруг существуют костыли)

[Вениамин Смирнов]

Олег: видел несколько западных сайтов с рекламой приложений, такой эффект использовался. Если он уместен, то почему-то бы и нет.

[#FFFFFF]

Вениамин Смирнов: Вы имеете в виду, что там ссылка, состоящая из двух строк, подчеркивалась только с самого низу, под второй строчкой, и это так и подразумевалось? Мне казалось, что это выглядит, как баг...

[Вениамин Смирнов]

Виктория: нет, я имел ввиду именно такой эффект при ссылке в 1 строку. Ссылка в 2 строки - это всегда не очень здорово выглядит, попробуйте либо сократить ещё как-то (например, не ВКонтакте, а ВК) или же уменьшить размер шрифта, если это возможно.

Answer 1

[Ден Тоцкий]

Вот запили такой вариант https://jsfiddle.net/x6bu5zy3/

Answer 2

[_ _]

Ripple-эффект! Стильно, модно, молодежно
https://github.com/virtyaluk/paper-ripple

Comments

[#FFFFFF]

не совсем понимаю, как это поможет моей проблеме. Мне нужно просто подчеркивание ссылок, которое "уезжает" при ховере.

[Kovalsky]

Виктория: вы пишете:

Можно ли сделать крутой эффект по наведению на двустрочную ссылку?
Дизайнер попросил сделать какой-нибудь интересный эффект на ховер ссылок
Есть ли какая-то возможность сделать "креативный" ховер на ссылку, чтобы это всегда прилично выглядело?

...а потом говорите "Мне нужно просто подчеркивание ссылок".
Вот люди смотрят на ваши вопросы, и по ним предлагают варианты.

Вы считаете что ваш эффект на две/три строки будет хорошо выглядеть? Представьте что ваше подчеркивание выезжает для обеих строк. Я бы испугался)

Бтв, ripple и правда хорошо смотрится. Можете еще глянуть сюда

[#FFFFFF]

Никита Полевой: спасибо за предложения, но тут все в основном кнопки или ссылки а-ля пункты меню, а мне нужен был какой-нибудь эффект для обычных ссылок. По последней ссылке эффекты, кстати, опять же ломаются, если текст ссылки длинный и переходит на новую строку - в чем собственно и проблема, вынесенная в заголовок вопроса.
Тем не менее спасибо за участие!

[Kovalsky]

Виктория: да, и правда, те эффекты не подходят. А вариант который предложил Ден Тоцкий вам не подходит?