javascript - 做 div :after content actually modify width? 我的转换不工作

Question

快速代码(不是我的实际代码，但它代表了它):

#myDiv {
background: black;
color:white;
float:left;
min-width:45px;
max-width:450px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
    
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}

<div id="myDiv">Here</div>

我知道这个问题可能太棘手了，因为选择器是分开的元素(或类似的东西，我还没有深入研究这个主题)，但我需要帮助找到解决这个问题的方法(欢迎使用 Javascript，也欢迎 JQuery:我但我宁愿不这样做，因为我对小东西的大型图书馆不太友好)，如果有人有时间，我将不胜感激。

如果您想了解我想要实现的目标，请在下方评论并发布我的实际代码。

Answer 1

问题是，当您离开或到达具有自动属性的属性时，转换不起作用。检查一下 Transition to and from position Auto

您可以采取一些变通方法来实现您想要的效果，例如:

#myDiv {
background: black;
color:white;
float:left;
width:45px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover{
    width: 450px;
}
    
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}

<div id="myDiv">Here</div>

但这取决于您的标记和您的需求，所以如果这没有帮助，您可以向您的问题添加更多详细信息或最好添加您的真实代码。