Search code examples
cssanimationtranslate-animation

CSS3 Transform Translate to the left

I have titles that I want to add CSS3 animation to it

I want to transform

Title

to

[Title]

And I want the square brackets to animate from the center of the word to the borders of it with animation.

something like..

Ti[]tle

to

[Title]

with animation (ofcourse i'm using :before :after to add the brackets with opacity 0 to 1)

my p style:

p:before {
    content: "[";
    position: absolute;
    left: 50%; /*to add the bracket to the center of the word*/
    opacity: 0;
    transition: all 0.7s ease;
}

Thank You !

Solution 

  • p {
    display: table;
    position: relative;
}

p:before,
p:after{
    position: absolute;
    opacity: 0;
    transition: all 0.7s ease;
}

p:before {
    content: "[";
    left: 50%;
}

p:after {
    content: "]";
    right: 50%;
}

p:hover:before {
    left: -5px;
    opacity: 1;
}

p:hover:after {
    right: -5px;
    opacity: 1;
}
    <p>Title</p>

<p>A Longer Title</p>