元素后的CSS过渡宽度

Question

我在转换这个元素的with开头时遇到了一些麻烦。小提琴给你。

#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，不使用psudo 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;
}