Question

使用时转换时间是否堆叠：之前和之后？似乎：before /：after的转换正在等待主元素的转换在开始转换之前完成。

a:after,a:before,a{
    -webkit-transition:all 300ms ease-in-out;
            transition:all 300ms ease-in-out }
a{
    color:red;
    text-decoration:none;
    font-size:28px;
    font-size:1.75rem }
a:hover{
    border-bottom:1px solid blue;
    border-bottom-width:.0625rem;
    color:blue }
a:after{
    padding-bottom:10px;
    padding-bottom:.625rem;
    border-bottom:1px solid white;
    border-bottom-width:.0625rem;
    content:':after' }
a:hover:after{ border-bottom-color:blue }
a:before{
    padding-bottom:5px;
    padding-bottom:.3125rem;
    content:':before' }
a:hover:before{
    box-shadow:0 4px 2px -2px blue;
    box-shadow:0 .25rem .125rem -0.125rem blue }

我确信这是一件很简单的事，我忽略了，通常就是这样。

Fee Fie Fiddle Foe

额外信用：在转换主题上，有没有办法让border能够顺利过渡？使用CSS？我设法做了一个工作，通过设置边框颜色与背景颜色相同，颜色似乎转换好了;然而，盒子阴影看起来很糟糕，从border:none到border:1px似乎放弃了任何过渡。

Answer 1

如果明确定义锚点及其伪元素的正常状态和悬停状态的颜色，则不会发生延迟。对于边框，您可以将颜色定义为transparent而不是背景颜色。

http://jsfiddle.net/myajouri/E8PqJ/

<强> CSS

.el,
.el:before,
.el:after {
    -webkit-transition: all 1s;
    transition: all 1s;
}

.el,
.el:before,
.el:after {
    color: blue;
    font-size: 32px;
    border-bottom: 1px solid transparent;
}

.el:before,
.el:after {
    padding-bottom: 20px;
}

.el:before {
    content: "before ";
}

.el:after {
    content: " after";
}

.el:hover,
.el:hover:before,
.el:hover:after {
    color: red;
    border-bottom: 1px solid red;
}

Answer 2

只需从前/后伪元素中取出转换：

a {
    -webkit-transition:all 3000ms ease-in-out;
    transition:all 3000ms ease-in-out;
}

http://jsfiddle.net/mKvuD/8/

转型：之前和之后：之后＆amp;边框渲染

2 个答案: