Question

wondering if it’s possible to add a character right before and after the link text in a hover state.

For example

regular state:

“The Text”

Hover state:

“[ The Text ]”

As it is at the moment my list looks like this.

<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;}

Thanks

Answer 1

Just use generated content:

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

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

JS Fiddle demo.