Question

我在转换此元素中的with开头时遇到了一些麻烦。这是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

我只在不使用psudo http://jsfiddle.net/vveST/

的情况下完成了CSS

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

CSS过渡宽度：元素之后

2 个答案: