使用jQuery更改CSS类内容

Question

我有链接，在悬停时，会显示＆＃34; bar＆＃34;后。

.link
{
   color:aqua;
   text-decoration: none;
   background-color: none;
}

.link:hover span {display:none;}
.link:hover::after {content: attr(data-content) 'bar';}

我的目标是，在文档加载时，附加＆＃34; foo＆＃34;在＆＃34; bar＆＃34;前面在内容中。我已经提到这个previous question寻求帮助，但似乎无法找到解决方案。这不起作用：

$(document).ready(function($){
     $('.link').attr('data-content','foo');
 });

对于出现问题的任何建议都将受到高度赞赏。如何在文档加载时更改.link的内容？