在悬停状态下在常规链接之前和之后添加字符

Question

想知道是否可以在悬停状态下在链接文本之前和之后添加字符。

例如

常规状态：

“文字”

悬停状态：

“[文字]”

目前我的列表看起来像这样。

<div  id="navigation">
<ul>
    <li><a href="#">Journalist</a></li>
    <li><a href="#">Writer</a></li>
    <li><a href="#">Publications designer</a></li>
</ul>

#navigation li a:hover{


  text-shadow:2px 1px 3px #00CDCD;}

由于

Answer 1

只使用生成的内容：

a:hover::before {
    content: '[ ';
}

a:hover::after {
    content: ' ]';
}

JS Fiddle demo