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

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 小提琴演示。