在悬停时将文本附加到 link 标题？

Question

所以我正在开发我的投资组合网站。其中一列有四个 div，每个 div 内都有一个按钮 ()，可以指向不同的页面（简历、作品集、联系方式等）。我想弄清楚的是如何使用 { 和 } 创建各种选择器。我真的很喜欢每个 link 周围的括号外观，因此例如当您将鼠标悬停在 Resume 上时，它会从 Resume 变为 { Resume }。我已经弄乱了 CSS 一段时间，并且在颜色上得到了一个很好的 1s 过渡，但我不知道如何让我的这个选择器想法起作用。我一直在尝试使用 JS/jQuery 在悬停时为每个添加和附加 { 和 }，但我似乎无法使其工作。我的 JS 绝对是初学者，我还没有从 google 搜索中看到任何对此有帮助的东西。

这是相关列的代码：

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

还有我的 JS：

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

我确定我搞砸了 HTML 或 JS（或两者），但我似乎无法弄清楚。任何帮助都会很棒！

PS：当我问的时候，我应该为我的 link 使用列表（UL？）还是像我目前在专栏中那样使用单独的 div？ link 是垂直方向的。

Answer 1

CSS 唯一的解决方案：（编辑：大括号放在 link 内而不是围绕它）

.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

里面有括号<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>

但我喜欢@mwl 的 :before 和 :after 解决方案，因为在这种情况下，您将无法使用鼠标 select 括号。

在悬停时将文本附加到 link 标题？

Appending text to link title on hover?

html

javascript

css

jquery

hover