CSS转换宽度on:after元素

我在转换此元素中的打开时遇到一些问题。这是我的建议

---

WebKit中有一个长期存在的错误，伪元素无法转换，但是，它现在已经修复，我认为这不是问题所在

这里的问题是您无法转换到

auto

值。您需要使用绝对值

您还必须设置初始值：

#control:after{
    content:"R";
    background-color:#333;
    color:#fff;
    display:inline-block;
    line-height:20px;
    padding:10px;
    height:20px;
    font-weight:bold;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -ms-transition: width 2s linear;
    -o-transition: width 2s linear;
    transition: width 2s linear;
    font-family:helvetica

    width: 50px;
}

#control:hover:after{
    content: "REGGI";
    width: 100px;
    cursor:pointer;
}

---

我是在没有他帮忙的情况下完成的

---

您是否尝试使用静态值而不是自动值？因为我是的，但它仍然不工作：你用的是什么浏览器？我是Chrome。是的，我检查了其他浏览器，它正在FF上工作，但是你告诉

…它现在已经修复了。

-。-@WooCaSh它在WebKit中修复了，修复是否进入Chrome是另一回事。我想你可能还需要设置一个初始值。我用这个代码更新了我的答案。在这里，你可以找到一些信息，说明为什么即使你将

width

value更改为static，它也不能在Chrome上工作：

#control:after{
    content:"R";
    background-color:#333;
    color:#fff;
    display:inline-block;
    line-height:20px;
    padding:10px;
    height:20px;
    font-weight:bold;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -ms-transition: width 2s linear;
    -o-transition: width 2s linear;
    transition: width 2s linear;
    font-family:helvetica

    width: 50px;
}

#control:hover:after{
    content: "REGGI";
    width: 100px;
    cursor:pointer;
}

a{
    text-decoration:none
}

#control{
    background-color:#333;
    color:#fff;
    display:inline-block;
    line-height:20px;
    padding:10px 15px;
    height:20px;
    width:12px;
    font-weight:bold;
    font-family:helvetica;
    -webkit-transition: width 0.1s ease;
    -moz-transition: width 0.1s ease;
    -ms-transition: width 0.1s ease;
    -o-transition: width 0.1s ease;
    transition: width 0.1s ease;
}

#control .b{
    display:none;
}

#control:hover .a{
    display:none;
}

#control:hover .b{
    display:inline-block;
}

#control:hover{
    width:55px;
    cursor:pointer;
}