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

Asked 28/7, 2016 at 17:54 Answered 10/1, 2022 at 4:57

Solved css animation css-transitions css-animations

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.

Extremely answered 28/7, 2016 at 17:54 Comment(8)

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 – Elda 28/7, 2016 at 17:56

@LGSon How do I use the max width trick in this case, where both values in the transition are variable? – Extremely 28/7, 2016 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, – Caracal 28/7, 2016 at 18:0

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 – Elda 28/7, 2016 at 18:0

@Caracal The contents change with a pseudo-element on hover (elem:hover::after) – Extremely 28/7, 2016 at 18:1

I would hope not...pseudo-elements shouldn't contain actual content...they're intended for styling. – Caracal 28/7, 2016 at 18:2

pseudo ?? ... now you definitely need to post your code – Elda 28/7, 2016 at 18:2

@Caracal In my actual code, it adds a "close" icon – Extremely 28/7, 2016 at 18:9

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>

Elda answered 28/7, 2016 at 18:12 Comment(6)

Right, do it on the pseudo element. I thought you were suggesting putting it on the main element, that's why I was confused ;) – Extremely 28/7, 2016 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 – Elda 28/7, 2016 at 18:16

Sorry, but can you give me a bit more help? Combining overflow: hidden with display: inline-block makes the ionicon disappear. – Extremely 28/7, 2016 at 19:47

@LukeTaylor Updated my answer – Elda 28/7, 2016 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. – Extremely 28/7, 2016 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. – Extremely 28/7, 2016 at 19:56

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>

Ruhnke answered 10/1, 2022 at 4:57 Comment(0)

Recommended topics

Hot tags