CSS ширина перехода автоматически

У меня есть элемент, ширину которого я хотел бы анимировать при изменении его содержимого. Она имеетwidth: autoи это никогда не изменится. я виделэтот трюк, но это для перехода между двумя значениями и один установлен. Я вообще не манипулирую значениями, а только контентом, и мне бы хотелось, чтобы размер моего элемента изменялся с анимацией. Это вообще возможно в CSS?

Вот упрощенная версия моего кода:

.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>

Мне бы хотелось, чтобы изменяемый размер анимировался, когда пользователь наводит курсор на элемент.

 LGSon28 июл. 2016 г., 20:02
псевдо ?? ... теперь вам обязательно нужно опубликовать свой код
 Luke Taylor28 июл. 2016 г., 20:09
@Paulie_D В моем реальном коде, он добавляет значок «закрыть»
 LGSon28 июл. 2016 г., 20:00
Сmax-width трюк вы даете ему значение, которое достаточно велико, чтобы вместить самое широкое. Если вы разместите свой HTML и CSS, я могу сделать пример для вас
 Luke Taylor28 июл. 2016 г., 20:01
@Paulie_D Содержание меняется с псевдоэлементом при наведении (elem:hover::after)
 Luke Taylor28 июл. 2016 г., 19:57
@LGSon Как использовать трюк с максимальной шириной в этом случае, когда оба значения в переходе являются переменными?
 Paulie_D28 июл. 2016 г., 20:00
Кроме того, что вы имеете в виду, «когда содержимое» меняется? ... Зачем они это делают? Если вы используете JS, чтобы сделать это ... тогда используйте JS, чтобы «автоматизировать» изменение ширины,
 Luke Taylor28 июл. 2016 г., 20:05
Разместил мой код.
 Paulie_D28 июл. 2016 г., 20:02
Я надеюсь, что нет ... псевдоэлементы не должны содержатьфактический содержание ... они предназначены длямоделирование.
 LGSon28 июл. 2016 г., 19:56
Вы не можете оживитьauto только с CSS. Либо используйте трюк «max-height», с которым вы связались, либо, при загрузке страницы, запустите небольшой скрипт, который устанавливает конечную высоту

Ответы на вопрос(1)

Решение Вопроса

Как я уже говорил, используйте трюк "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>

 LGSon28 июл. 2016 г., 21:49
@LukeTaylor Можете ли вы опубликовать рабочую скрипку?
 LGSon28 июл. 2016 г., 21:57
@ LukeTaylor Нет проблем, хорошо, что вы нашли это
 Luke Taylor28 июл. 2016 г., 21:47
Извините, но вы можете мне помочь? Объединяяoverflow: hidden сdisplay: inline-block заставляет ионик исчезать.
 Luke Taylor28 июл. 2016 г., 21:53
Хм, похоже, работает, когда я пытался создать MCVE, демонстрирующий проблему. Я вернусь, если я не могу решить.
 Luke Taylor28 июл. 2016 г., 21:49
только что обновил мой пример в вопросе
 Luke Taylor28 июл. 2016 г., 21:56
Проблема была вызвана моим (глупым) использованиемline-height: 0 как временный хак для исправления макета. Очевидно, это будет скрывать значок при использованииoverflow: hidden;, Извините за беспокойство.
 LGSon28 июл. 2016 г., 20:16
@LukeTaylor Если ваш значок закрытия имеет предопределенную ширину, вы можете просто использовать ширину вместо него и дать псевдо-значок окончательной ширины в комплекте
 LGSon28 июл. 2016 г., 21:52
@LukeTaylor Обновил мой ответ
 Luke Taylor28 июл. 2016 г., 20:12
Правильно, сделайте это на псевдоэлементе. Я думал, что вы предлагаете поместить его в основной элемент, поэтому я запутался;)

Ваш ответ на вопрос