:after 元素上的 CSS 过渡宽度

Question

我在转换此元素中的 with opening 时遇到了一些问题。这是fiddle。

#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
}

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

Answer 1

我在没有他的情况下完成了 CSS http://jsfiddle.net/vveST/

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;
}

Answer 2

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;
}