Home >Web Front-end >CSS Tutorial >How Can I Animate the Width of an Element with `width: auto`?
Animated Element Resizing with Auto Width
Question:
How to animate the width of an element with width: auto as the content changes?
Answer:
Animating the direct width of an element with width: auto is currently not supported in CSS. However, you can utilize alternative methods:
1. Max-Width/Max-Height Trick:
Code Snippet
.myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom; max-width: 500px; // Adjust as necessary } .myspan::after { content: " a0\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; }
2. JavaScript Manipulation:
Note: This method requires additional code and may not be as efficient as the first approach.
The above is the detailed content of How Can I Animate the Width of an Element with `width: auto`?. For more information, please follow other related articles on the PHP Chinese website!