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

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。