javascript - 如何在wordpress中为链接使用分层字体？

Question

所以我似乎有点陷入困境。我已经在谷歌上搜索了不同的东西几个小时，但没有真正得到任何结果。我目前正在开发 WordPress 主题，并尝试为我的链接使用分层字体。基本上，我的基本链接有一个黑色笔划(字母轮廓)字体，当它们悬停在上面时，我希望文本用纯红色填充，同时仍然保持字母上的黑色笔划。

类似这样的事情:

我目前使用 CSS 伪选择器 :after 并访问元素标题值来对我的 WordPress 主题的某些元素进行此操作。

示例:

.entry-title a:hover:after {
    font-family: 'fillFont';
    content: attr(title);
    position: absolute;
    top: 0px;
    left: 0px;
}

这之所以有效，是因为我可以在 WordPress 模板中使用 PHP 设置条目标题等的标题属性。但这仅适用于在 Wordpress 中生成的具有标题属性的某些链接。对于通用链接，没有我可以使用 PHP(据我所知)解析的标题属性，因此我无法像我一直在做的那样使用 CSS 对其进行样式设置。

我现在能想到的唯一解决方案是使用 Javascript 在每次加载页面时迭代页面并为每个链接元素添加标题属性，但我认为这会导致一些相当严重的性能问题。

有谁知道有什么解决办法吗？或者如果有可能的话？我非常愿意接受任何能够达到相同效果的建议。

Answer 1

使用文本阴影:

.demo
{
    font-size: 50px;
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;   
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

.demo:hover {
  color: red;
}

<div class="demo">
    Example
</div>

此答案的来源:

Outline effect to text