Как сделать свое оформление для ссылки Youtube на сайте через CSS

Недавно захотели реализовать для клиента следующую "фичу" - чтобы возле каждой ссылки на youtube была иконка, которая бы давала понимать, что это ссылка на ютубчик.

Соотвественно, реализовать захотели это все дело через стили CSS и не банальными классами, а через правила.

Вот то, что по итогу получилось:

a[href="youtube.com/watch?"] {
&::after {
padding-left: 20px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
background-image: url('/assets/images/icons/youtube-green.svg');
content: '';
}
&:hover {
&::after {
background-image: url('/assets/images/icons/youtube-blue.svg');
}
}
}

Соответственно, как это работает: через описанное правило мы берем все ссылки, которые содержат часть "youtube.com/watch?" в аттрибуте href и для этих ссылок применяем стили, которые мы описали через псевдоклассы :after и через :hover