Проблема решилась самым простым образом.
Сначала нужно писать псевдокласс :hover, а затем псевдоэлемент :before, таким образом:
div:hover:after{}

У меня точно такая же ситуация как и у тебя. Но начал я неожиданно, когда увидел на youtube уроки от Sorax-а. Посмотрел, рассказывает очень быстро, но те кто разбираются в js, говорят что курс больше подходит для тех, кто что-то о js уже знает и хочет вспомнить или узнать остальные подробности. Так вот первые уроки несложные, но потом нужно практиковаться, чтобы понять. Так что если книги читать не очень любишь, идеальный вариант. Я никогда и нигде не видел бесплатных уроков по каким-либо языкам в интернете такого уровня. Так что советую. Но начал я его, как не странно, смотреть не с JS, а с уроков CSS и узнал очень много полезной информации, которой раньше не знал подняв свой уровень вёрстки.
Вообщем, надеюсь чем-то помог. Вот youtube канал, вот группа на vk.com со всеми обновлениями.
Буду следить за топиком, так как сам не прочь почитать литературу, чтобы понять js.

Вот так это делается.

Согласен с @thorman. Теория необходима в этой сфере, без неё никак. В любом случае эту же теорию придётся получать просматривая веб странички с разными готовыми решениями в течении года и искать на форумах ответы на вопросы. Или просто прочитать хорошую книжку и понять как и что создаётся. Если говорить о Photoshop, то тут с книжками конечно другая ситуация. Если и читать, то придётся одновременно сидеть в самом фотошопе. Гораздо проще действовать самым простым методом. Находишь самый понравившийся сайт с уроками по последнему Photoshop, категории веб дизайн. И начинаешь делать в день от 1 макета по образцу. Через порядка 10 макетов уже будешь понимать стандартные функции photoshop-а, через ещё несколько десятков сможешь и сам нарисовать. А потом уже как пойдёт, либо сам начнёшь делать, либо продолжишь изучать.
Если хочешь учить какие-то языки программирования, то без теории не получится. Если нужны, например html/css знания для вёрстки. То для ленивого самым лучшим решением будет смотреть видео уроки. Я знаю очень хорошего верстальщика, Зоракса, которые делает отменные уроки по CSS, HTML, а в придачу есть и Javascript, если заинтересует. Вот его канал на youtube.
Книги хороши в любом случае, если не понимаешь что там написано, то пробуй практиковать самые простые пример. Например если говорить о JS, то там начнёшь с сложений, вычитаний, умножений и пр. а потом перейдёшь к чему то менее лёгкому и начнёшь вникать. Я понимаю какое у тебя мнение о книгах. Возможно оно сопоставимо только для изучения photoshop-а, так как я изучал его без книг. Для всего остального скачивай книги. Если не с чего читать, а с компьютера не хочешь. Бери бумажные в магазинах, но лучше закажи по интернету, то что посоветуют разработчики, которые изучали по книгам. Альтернатив книгам много, те же видео, но не всегда ты найдёшь подходящие. Я видел видео уроки в которых самые простые темы очень долго размусоливали на целый час. То же самое Зоракс объяснил за 5-10 минут в своём видео, виной тому может быть неподготовленность диктора, паузы и прочее. Книги тем и лучше, что там всё исправлено, идеально сжато и подано. Кто то изучает благодаря статьям, то есть делаешь то, что хочешь, при этом на каждый вопрос обращаешься к гуглу и там вычитываешь десятки статей, чтобы понять решение. Это очень много времени отнимает, но кто-то и так изучает. Решать тебе. Только что увидел, что ты свободно владеешь html/css. Тогда в чём проблема рисовать дизайны? Не знаешь функционал фотошопа или не можешь придумать дизайн. Если первое, то я уже описал, что нужно делать. Если второе, то сложнее, тут всё зависит от человека, кто-то может, а кто-то нет. Но с опытом и эти придёт. Удачи.

Gradient editor. Выберете радиальную ориентацию, затем выберете цвета, как в Photoshop, слева светло-серый, справа тёмно-серый. И получите то, что ищите. Там сразу же адаптивный код под все браузеры, так что не беспокойтесь, но если будете вручную изменять цвета, то придётся оперировать только с градиентом для вашего браузера.