Такие штуки у поисковика называются Сниппетами. (Кое-что можно узнать тут, хотя это и не самая акту...)
В основном, они формируются из микрокразметки (Здесь можешь почитать про основной стандарт микроразметки - Schema.org
Сейчас поисковики достаточно умные и используют разные другие приёмы для формирования сниппета, посмотри в кабинете вебмастера у гугл, у них есть волшебная выделялка ключевой информации на сайте.
Там во время наведения :hover у svg с таким же контуром меняется цвет с прозрачного на немного прозрачный.
Можно посмотреть с помощью инструментов разработчика ( например, в хроме достаточно нажать f12), как оно работает - наводить и убирать мышку - код svg меняется.
Рекомендую также поставить на браузер Chrome расширение Wappalyzer - показывает, какие технологии используются на сайте
Лучше всего писать CSS в подключаемых файлах .css
Во-первых - таким способом ты разделяешь разметку и стили, не превращаешь всё в кашу.
Во-вторых, стили прописанные в аттрибуте style="" сложно перевесить - для этого нужно делать !important, теряется вся фишка "каскадных" стилей.
А так, всё можно использовать в нужных случаях, смотри по ситуации.
Всему своё место
