Почему код с псевдоклассом :after не валиден?
Судя по тому что смог разглядеть забыли кавычки в content: 'стрелочка'
Есть такая международная организация, которая занимается стандартизацией спецификаций для HTML и CSS (на самом деле не только для них, и организации две, но это не важно). Называется она World Wide Web Consortium, или сокращённо W3C.
Как то раз они начали писать стандарт для языка CSS третьей версии. Наверное им в голову моча, или они решили сделать разделение на стили состояния (hover, active и т.п.) и стили генерации (before, after) более явным, но в общем в третьей версии языка они решили добавить ещё одно двоеточие для стилей псевдо-элементов.
Браузеры в свою очередь сделаны для людей, а людям будет неприятно если какие-то стили вдруг перестанут работать. Поэтому современные браузеры решили поддерживать оба стандарта. Короче:
В CSS 2 - :after (старые + современные браузеры)
В CSS 3 - ::after (только современные браузеры)
Но, в принципе, оба варианта валидны.