CSS Transition on the 'content' property of :before pseudo element

Louis93

Here's a fiddle demonstrating the problem: http://jsfiddle.net/c4MNs/

Essentially I am swapping out the contents of the content property under the i:before pseudo which works fine. However, I am unable to force a transition such that this swap occurs smoothly.

I followed the advice found in this answer: https://stackoverflow.com/a/19579514/765409

But you can see that this is not effective in this situation.

Arbel

You can't apply transition to pseudo elements content property's content itself. You can apply transition to a pseudo element's opacity, width, height, its content's font-size and many more properties... but not the content property's content.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Is there a way to use SVG as content in a pseudo element :before or :after

From Dev

Css pseudo-element ::before(2); :before and ::before

From Dev

css pseudo-element appearing over top of content

From Dev

CSS ::before ::after pseudo-element of class not working

From Dev

CSS ::before pseudo-element line-height?

From Dev

Pseudo element :hover on ::before

From Dev

css :before/:after pseudo-elements/content reference tag name

From Dev

CSS Transition on the 'content' property of :before pseudo element

From Dev

before pseudo-element covering inner content

From Dev

Change content property of pseudo element within CSS animation

From Dev

CSS, using display:table with before pseudo element

From Dev

Using the :after CSS pseudo-element without inserting content

From Dev

CSS pseudo after/before using content or background for img?

From Dev

css :before pseudo element + twitter bootstrap navbar logo

From Dev

CSS centering content add by pseudo-element after

From Dev

Pause css transition on before element

From Dev

Generate CSS Pseudo content for before/after dynamically using Angularjs

From Dev

Creating a shape using a :before pseudo element in CSS

From Dev

Retrieve a pseudo element's content property value using JavaScript

From Dev

How to line up a css ::before pseudo element like a grid

From Dev

CSS pseudo-class :required does not work together with pseudo-element ::before

From Dev

Pseudo element content with JQuery

From Dev

CSS ::before ::after pseudo-element of class not working

From Dev

transition delay on :before content

From Dev

How to change property of a specific CSS pseudo element?

From Dev

CSS-Transition doesn't work on pseudo-element

From Dev

CSS pseudo element ::before is not working properly

From Dev

CSS3 Transition on pseudo element (::before) does not work

From Dev

Responsive CSS transform for before pseudo-element

Related Related

  1. 1

    Is there a way to use SVG as content in a pseudo element :before or :after

  2. 2

    Css pseudo-element ::before(2); :before and ::before

  3. 3

    css pseudo-element appearing over top of content

  4. 4

    CSS ::before ::after pseudo-element of class not working

  5. 5

    CSS ::before pseudo-element line-height?

  6. 6

    Pseudo element :hover on ::before

  7. 7

    css :before/:after pseudo-elements/content reference tag name

  8. 8

    CSS Transition on the 'content' property of :before pseudo element

  9. 9

    before pseudo-element covering inner content

  10. 10

    Change content property of pseudo element within CSS animation

  11. 11

    CSS, using display:table with before pseudo element

  12. 12

    Using the :after CSS pseudo-element without inserting content

  13. 13

    CSS pseudo after/before using content or background for img?

  14. 14

    css :before pseudo element + twitter bootstrap navbar logo

  15. 15

    CSS centering content add by pseudo-element after

  16. 16

    Pause css transition on before element

  17. 17

    Generate CSS Pseudo content for before/after dynamically using Angularjs

  18. 18

    Creating a shape using a :before pseudo element in CSS

  19. 19

    Retrieve a pseudo element's content property value using JavaScript

  20. 20

    How to line up a css ::before pseudo element like a grid

  21. 21

    CSS pseudo-class :required does not work together with pseudo-element ::before

  22. 22

    Pseudo element content with JQuery

  23. 23

    CSS ::before ::after pseudo-element of class not working

  24. 24

    transition delay on :before content

  25. 25

    How to change property of a specific CSS pseudo element?

  26. 26

    CSS-Transition doesn't work on pseudo-element

  27. 27

    CSS pseudo element ::before is not working properly

  28. 28

    CSS3 Transition on pseudo element (::before) does not work

  29. 29

    Responsive CSS transform for before pseudo-element

HotTag

Archive