将文字附加到悬停链接标题上吗？

Question

So I'm working on my portfolio website. One of the columns has four divs, each with a button inside () that leads to a different page (Resume, Portfolio, Contact, etc). What I'm trying to figure out is how to create a selector of sorts using { and }. I really like the look of brackets around each link, so for instance when you hover over Resume, it would change from Resume to { Resume }. I've been messing with CSS for awhile and got a nice 1s transition on the color, but I have no idea how to get this selector idea of mine to work. I've been attempting to use JS/jQuery to prepend and append { and } to each on hover, but I can't seem to make it work. My JS is definitely on the beginner side, and I haven't seen anything from google searches that helps with this.

Here's the code for the column in question:

<div class="col-xs-12 col-sm-3 col-lg-4">
           <div class="resume button links marginTop"><a href="resume.html" class="btn">Resume</a></div>
           <div class="portfolio links button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
           <div class="photography links button"><a href="photography.html" class="btn">Photography</a></div>
           <div class="contact links button"><a href="mailto:me@me.me" class="btn">Contact</a></div>
        </div>

And my JS:

$(function() {
$('.links').hover(function(){
    var text = (this).text();
    $(this).text = "{ " + text + " }";
});});

I'm sure I'm messing up either the HTML or JS (or both), but I can't seem to figure it out. Any help would be great!

PS: While I'm asking, should I be using a list (UL?) for my links vs. separate divs like I have currently in the column? The links are vertically oriented.

Answer 1

CSS only solution: (EDIT: braces placed within the link not around it)

 .links:hover a:before { content: '{'; } .links:hover a:after { content: '}'; } 

 <div class="col-xs-12 col-sm-3 col-lg-4"> <div class="resume button links marginTop"><a href="resume.html" class="btn">Resume</a></div> <div class="portfolio links button"> <a href="portfolio.html" class="btn">Portfolio</a></div> <div class="photography links button"><a href="photography.html" class="btn">Photography</a></div> <div class="contact links button"><a href="mailto:me@me.me" class="btn">Contact</a></div> </div> 

Answer 2

With brackets inside <a> :

 a { display: block; } a span { opacity: 0; } a:hover span { opacity: 1; } 

 <a href="#"><span>{</span>Resume<span>}</span></a> <a href="#"><span>{</span>Portfolio<span>}</span></a> <a href="#"><span>{</span>Photography<span>}</span></a> <a href="#"><span>{</span>Contact<span>}</span></a> 

But I like @mwl's solution with :before and :after cause in this case you won't be able to select brackets with mouse.