CSS3 Transform 向左平移

Question

我有标题，我想给它添加 CSS3 动画

我要转型

标题

到

[标题]

我希望方括号从单词的中心到它的边界具有动画效果。

有点像..

标题[]标题

到

[标题]

带有动画(当然我正在使用 :before :after 添加 opacity 0 到 1 的括号)

我的风格:

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

谢谢!

Answer 1

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>