All geek questions in one place

CSS auto transition width

I have an element whose width I would like to animate when its contents change. He has width: auto, and that never changes. I saw this trick , but to go between two values ​​and one set. I don’t manipulate values ​​at all, only the content, and I would like the element size to change with the animation. Is this possible in CSS?

Here is 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>
Run code

I would like the resizable to appear when the user hangs over an element.

+4
source share
1 answer

, "max-width" / "max-height".

, .

.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: all 1s;
  vertical-align: bottom;
  overflow: hidden;
}
.myspan:hover::after {
  max-width: 80px;
  transition: all 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

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

Source: https://habr.com/ru/post/1649452/

More articles:


All Articles