Анимирование свойства CSS transition в псевдоклассах :after/:before

Возможно ли анимировать псевдоклассы CSS?

Скажем, у меня есть:

#foo:after {
    content: '';
    width: 200px;
    height: 200px;
    background: red;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#foo:hover:after {
    width: 250px;
    height: 250px;
}

Возможно ли это вообще? Я тестировал и пока не могу найти решение. Я пытаюсь сократить количество необходимой мне поддержки JavaScript, используя Modernizr.

У меня уже есть метод JavaScript, поэтому, пожалуйста, никаких альтернатив JavaScript.

Demo: http://jsfiddle.net/MxTvw/

29
задан jacefarm 13 October 2017 в 22:37
поделиться