Как сделать круговую обводку с отступом от элемента при наведении средствами CSS?

Question

[Don Puh]

Собственно весь вопрос в теме. Скрин ниже (выделил красным).

Answer 1

[Uneasy Hearts Weigh the Most]

Answer 2

[Рома Зварич]

Один из вариантов - с помощью теней
Первая тень выступает в роли "отступа", вторая - в роли рамки.
https://codepen.io/hisbvdis/pen/XWMWWyQ

Answer 3

[tyoma_koder]

border с outline-offset

Comments

[Don Puh]

Outline же только квадратный/прямоугольный? Круглый только в Firefox можно сделать. Или я ошибаюсь?

[tyoma_koder]

Don Puh, так border-radius: 50% поставь

[Don Puh]

tyoma_koder, если не затруднит, можно код...

[Uneasy Hearts Weigh the Most]

tyoma_koder, outline стал наследовать border-radius наверное только пару недель как в гуглохроме, это не кроссбраузерно, совсем.

[tyoma_koder]

Don Puh, а, я бордер с оутлайн попутал, оутлайн не скругляется, тогда вариант с тенями

[Don Puh]

Uneasy Hearts Weigh the Most, да, именно это я и имел ввиду. Спасибо!

Answer 4

[Forgetful]

Можно добвить before элемент с opacity: 0 и с помощью class:hover::before изменить его на opacity: 1