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 Dev

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

From Dev

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

From Dev

Change content property of pseudo element within CSS animation

From Dev

Pause css transition on before element

From Dev

before pseudo-element covering inner content

From Dev

CSS, using display:table with before pseudo element

From Dev

Creating a shape using a :before pseudo element in CSS

From Dev

CSS pseudo element ::before is not working properly

From Dev

Responsive CSS transform for before pseudo-element

From Dev

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

From Dev

How to change property of a specific CSS pseudo element?

From Dev

CSS-Transition doesn't work on pseudo-element

From Java

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

From Dev

Retrieve a pseudo element's content property value using JavaScript

From Dev

Generate CSS Pseudo content for before/after dynamically using Angularjs

From Dev

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

From Dev

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

From Dev

Pseudo element :hover on ::before

From Dev

transition delay on :before content

From Dev

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

From Dev

CSS ::before pseudo-element line-height?

From Dev

css :before pseudo element + twitter bootstrap navbar logo

From Dev

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

From Dev

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

From Dev

Pseudo element content with JQuery

From Dev

css pseudo-element appearing over top of content

From Dev

Using the :after CSS pseudo-element without inserting content

From Dev

CSS centering content add by pseudo-element after

From Dev

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

Related Related

  1. 1

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

  2. 2

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

  3. 3

    Change content property of pseudo element within CSS animation

  4. 4

    Pause css transition on before element

  5. 5

    before pseudo-element covering inner content

  6. 6

    CSS, using display:table with before pseudo element

  7. 7

    Creating a shape using a :before pseudo element in CSS

  8. 8

    CSS pseudo element ::before is not working properly

  9. 9

    Responsive CSS transform for before pseudo-element

  10. 10

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

  11. 11

    How to change property of a specific CSS pseudo element?

  12. 12

    CSS-Transition doesn't work on pseudo-element

  13. 13

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

  14. 14

    Retrieve a pseudo element's content property value using JavaScript

  15. 15

    Generate CSS Pseudo content for before/after dynamically using Angularjs

  16. 16

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

  17. 17

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

  18. 18

    Pseudo element :hover on ::before

  19. 19

    transition delay on :before content

  20. 20

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

  21. 21

    CSS ::before pseudo-element line-height?

  22. 22

    css :before pseudo element + twitter bootstrap navbar logo

  23. 23

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

  24. 24

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

  25. 25

    Pseudo element content with JQuery

  26. 26

    css pseudo-element appearing over top of content

  27. 27

    Using the :after CSS pseudo-element without inserting content

  28. 28

    CSS centering content add by pseudo-element after

  29. 29

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

HotTag

Archive