Одновременное использование hover и before или другое решение проблемы?

Question

[Иван Желудков]

Вот код, который можно и посмотреть и попробовать изменить.
Нужно, чтобы при наведении на полупрозрачный логотип слева выводилась надпись, например, "Дизайн и разработка:", но до наведения видно надпись не должно быть вообще.
Проблему можно было бы очень легко решить, если бы можно было сделать
.copy:hover:before, но к сожалению псевдокласс и псевдоэлемент вместе не работают.
Помогите решить проблему. Скорей всего это можно решить с помощью jQuery в две строчки, но jquery я не знаю, как и js. Поэтому ищу любые решения.
P.S. Код (ссылка выше) находится в таком состоянии, при котором всё было бы идеально, если бы работали псевдокласс и псевдоэлемент. Если уберёте opacity: 0 у before, увидите надпись.

Comments

[Иван Желудков]

Исправил небольшую проблему на codepen, там вообще не отображался content, теперь нормально.

[Иван Желудков]

Раньше он не отображался всегда, а сейчас только с определёнными параметрами, из-за описанной выше проблемы (объект обсуждения)

Answer 1

[Иван Желудков]

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

Comments

[Илья]

Да, только лучше не :after, а ::after, у вас старый вариант CSS2, сейчас CSS3.

[Arkee]

Спасибо, помог

Answer 2

[nekitosp]

все же нормально работает (.copy:hover:before) jsfiddle.net/AYB26/

Comments

[Иван Желудков]

Спасибо, я как раз только что решил проблему. Оказалось перепутал порядок hover и before.

Answer 3

[Алексей Лосев]

А как быть в таком случае? Когда нужен hover на оба отдельно! https://jsfiddle.net/yalyoha/q93fsz2o/

Comments

[krontill]

Нашел ответ?

[Алексей]

Нужно понимать, что когда создается before или after, то это просто дополнительный потомок, генерируемый через css. Если посмотреть в инспектор любого браузера, то элемент :before, например, будет потомком элемента, к которому назначен. Поэтому глобальные свойства, например, елемент:hover{opacity:0.5} будут так же действовать и на потомка. Локальные, такие как background, color и т.п. можно назначать на разные :hover отдельно. В случае когда вопрос стоит раздельный ховер из-за разнесенных элементов, то это елемент:hover и елемент:before:hover - это будут два независимых ховера при использовании локальных свойств, просто в елемент:before:hover переназначайте свойства, указанные в елемент:hover.