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:

• Assign a large enough max-width/max-height to accommodate for the widest potential content.
• Use display: inline-block for the element to activate sizing on content changes.

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:

• Use JavaScript to dynamically set the width property based on the content's length.

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!