How can I transition width of content with width: auto?

by

As I commented, one can’t animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.

With the max-width/max-height trick, give it a value big enough to accommodate the widest.

Stack snippet

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}
.myspan::after {
  content: " \00a0\f12a ";
  font-family: ionicons;
  font-size: 80%;  
  display: inline-block;
  max-width: 0;
  transition: max-width .6s;
  vertical-align: bottom;
  overflow: hidden;
}
.myspan:hover::after {
  max-width: 80px;
  transition: max-width 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<span class="myspan">Hello!</span>

More Related Contents:

  1. Use CSS3 transitions with gradient backgrounds
  2. css3 transition animation on load?
  3. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  4. CSS transition auto height not working [duplicate]
  5. Why can’t I animate custom properties (aka CSS variables)?
  6. CSS: Animation vs. Transition
  7. Animating max-height with CSS transitions
  8. Reuse CSS animation in reversed direction (by resetting the state?)
  9. Maintaining the final state at end of a CSS3 animation
  10. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  11. Changing Background Image with CSS3 Animations
  12. SVG animation is not working on IE11
  13. CSS3 animation not working in safari
  14. CSS animation delay in repeating
  15. Transition background-color via slide animation
  16. Simulating transform-origin using translate
  17. Passing parameters to css animation
  18. Using CSS transitions in CSS Grid Layout
  19. Background-image in keyframe does not display in Firefox or Internet Explorer
  20. Pure CSS scroll animation
  21. CSS transition with visibility not working
  22. CSS how to make an element fade in and then fade out?
  23. Changing :hover to touch/click for mobile devices
  24. CSS3 Transition – Fade out effect
  25. Filling water animation
  26. Pure CSS animation visibility with delay
  27. Delay mouseout/hover with CSS3 transitions
  28. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  29. CSS Animation property stays after animating
  30. CSS3 transitions on pseudo-elements (:after, :before) not working?

Leave a Comment