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

Question

I have an element whose width I'd like to animate when its contents change. It has width: auto, and this never changes. I've seen this trick, but that's for transitioning between two values and one is set. I'm not manipulating the values at all, only the content, and I'd like my element's size to change with animation. Is this at all possible in CSS?

Here's a simplified version of my code:

.myspan {
  background-color: #ddd;
}

.myspan:hover::after {
  content: "\00a0\f12a";
  font-family: Ionicons;
  font-size: 80%;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
  <body>
    <span class="myspan">Hello!</span>
  </body>
</html>

I'd like the changing size to animate when the user hovers over the element.

You can't animate `auto` with CSS only. Either use the "max-height" trick you've linked to or, on page load, run a small script which sets the final height — Asons, Jul 28 '16 at 17:56
@LGSon How do I use the max width trick in this case, where both values in the transition are variable? — Luke Taylor, Jul 28 '16 at 17:57
Plus, what do you mean "when the contents" change?...Why would they do that? If you're using JS to do that...then use JS to 'automate' the width change, — Paulie_D, Jul 28 '16 at 18:00
With the `max-width` trick you give it a value that is big enough to accommodate the widest. If you post your HTML and CSS I might be able to make a sample for you — Asons, Jul 28 '16 at 18:00
@Paulie_D The contents change with a pseudo-element on hover (`elem:hover::after`) — Luke Taylor, Jul 28 '16 at 18:01
I would hope not...pseudo-elements shouldn't contain **actual** content...they're intended for *styling*. — Paulie_D, Jul 28 '16 at 18:02

Asons · Accepted Answer · 2019-08-09T06:46:54.683

57

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>

edited Aug 09 '19 at 06:46

answered Jul 28 '16 at 18:12

Asons

84,923
12
110
165

Right, do it on the pseudo element. I thought you were suggesting putting it on the main element, that's why I was confused ;) – Luke Taylor Jul 28 '16 at 18:12
@LukeTaylor If your close icon has a predefined width, you can just use width instead,and give the pseudo the final width icon included – Asons Jul 28 '16 at 18:16
Sorry, but can you give me a bit more help? Combining `overflow: hidden` with `display: inline-block` makes the ionicon disappear. – Luke Taylor Jul 28 '16 at 19:47
@LukeTaylor Updated my answer – Asons Jul 28 '16 at 19:52
Hmm, it seems to work when I tried to create a MCVE demonstrating the issue. I'll come back if I can't solve. – Luke Taylor Jul 28 '16 at 19:53
The issue was caused by my (silly) use of `line-height: 0` as a temporary hack to fix layout. Obviously, this would hide the icon when using `overflow: hidden;`. Sorry for the trouble. – Luke Taylor Jul 28 '16 at 19:56

score 5 · Answer 2 · answered Jan 10 '22 at 04:57

I think it's useful

const expandBtn = document.getElementById('expand-btn');
expandBtn.onclick = (e) => {
  e.target.nextElementSibling.classList.toggle("active");
}

ul {
  background-color: yellow;
  overflow: hidden;
  transition-duration: 1s;
  transition-property: max-height;
  height: auto;
  max-height: 0;
}

ul.active {
  max-height: 600px;
}

<button id="expand-btn">Expand</button>
<ul>
  <li>Hihi</li>
  <li>Hello</li>
  <li>Rap star</li>
  <li>Hiphop</li>
</ul>

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

2 Answers2

Linked

Related