CODEWITHSUNDEEP
csspseudo-element
darcher
darcher

Reputation: 3134

Transitions on :before & :after & border rendering

Do transition times stack when using :before and :after? It seems like the transitions for the :before/:after are waiting for the main element's transition to complete prior to beginning their transition.

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 }

I'm sure it's something simple that I'm overlooking, it's usually the case.

Fee Fie Fiddle Foe

Extra Credit: while on the transitions topic, is there a way to actually get the border to transition smoothly? Using CSS? I've managed to do a work around, by way of setting the border color the same as background color, colors seem to transition okay; however, box-shadow looks terrible and going from border:none to a border:1px seems to forego any transitions.

Upvotes: 1

Views: 1143

Answers (2)

myajouri
myajouri

Reputation: 3124

The delay will not happen if you explicitly define the colors of the normal state and hover state for the anchor and its pseudo elements. For borders, you could define the color to be transparent instead of the background color.

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

Upvotes: 2

Petah
Petah

Reputation: 46060

Just take the transitions off the before/after pseudo elements:

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

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

Upvotes: 1

Related Questions