WordPress中的动画链接下划线

我们正在制作的链接效果的示例。

本文将讨论在 WordPress 中为您的超链接添加自定义样式。

自互联网诞生以来，超链接就已经存在，并且直到 2010 年代后期仍然相当标准。 那时，设计师开始移除下划线，添加有趣的悬停效果，并围绕 <a> 的一般样式进行更改。

今天，我们看到重新回到标准超链接，主要是因为用户熟悉它，它会带来更高的点击率，而且它只是使用 WordPress 时的默认设置。

我们最近进行了一项测试，看看删除下划线是否会影响我们 WordPress 网站的点击率。 我们发现，删除下划线后，用户点击网站上的链接会减少。 一旦添加下划线，用户最终会点击更多链接。 这意味着下划线是任何在线链接的基本元素。

然而，作为一家设计机构，我们想稍微修饰一下我们网站上的超链接。 如果您使用代码笔并搜索超链接样式，您会遇到大量代码片段，可用于更改网站上链接的设计和形式。 但是，我们注意到其中大多数涉及在用户将鼠标悬停在链接上时添加下划线。 这意味着一开始没有下划线，导致点击率较低

我们想创建一个可以在任何 WordPress 网站上实现的代码片段，当用户将鼠标悬停在链接上时，它会为超链接下划线设置动画。

不是添加下划线，而是删除下划线。 这样做是为了让用户仍然知道这是一个要点击的链接，并在将鼠标悬停在链接上时获得视觉反馈。

当链接悬停时，通过动画下划线滑开，我们的网站有更多的自定义感觉。 我们注意到我们利基市场中的其他几个网站也在做同样的事情。 他们使用带下划线的超链接，但是当用户将鼠标悬停在它们上方时，下划线会以某种方式变为动画。

我们最喜欢的例子是 Kinsta 博客上的链接样式。 我们决定使用该博客上的链接作为灵感。 这是对超链接应用漂亮悬停效果的 CSS 块。 它很容易安装在 WordPress 网站中，我们将在下面讨论。

CSS 样式化 WordPress 中的超链接

这是一个简洁的图表，显示了代码并解释了每一行的作用，已发布到 Reddit。 它收到了非常积极的反馈，以及一些关于如何改进代码的额外建议。

这是您可以用来将类似样式应用于您自己的 WordPress 网站上的超链接的代码。 例如，您可以将鼠标悬停在此链接上以查看此代码应用的效果。 最初灵感来自 Kinsta 博客上的链接。

a { color : #6699CC ; background-image : linear-gradient (transparent calc( 100% - 2px ), #6699CC 1px ); text-decoration : none; background-size : 100% 100% ; background-position : 100% ; position : relative; background-repeat : no-repeat; transition : all . 2s ; } a :hover { background-size : 0 100% ; }
 代码语言： CSS （ css ）

我们喜欢这段代码的原因是因为它对所有类型的超链接都应用了悬停效果，即使它们是多行的（您可以通过悬停在此代码上方的示例上看到这一点）。

subreddit 中有些人担心，这段代码对于简单地为超链接设置动画可能有点繁重（并且会导致重绘），并且另一种向 WordPress 添加超链接悬停效果的方法浮出水面。

这是代码（由该评论的发布者创建）：

 body{ padding : 1.5 rem; } a{ position : relative; text-decoration: none; color: purple; &:after{ content : '' ; position: absolute; bottom: 0 ; left: 0 ; width: 100 %; height: 0.1 em; min-height: 1 px; background-color: currentColor; transform-origin: right; transition: transform .25 s ease; } &:hover{ &:after{ transform : scaleX( 0 ); } } }
 代码语言： JavaScript （ javascript ）

这就是它的作用：

使用此方法设置样式的链接示例。

这种方法更轻量级，不会导致重绘，但它的主要问题是它无法工作跨多行的链接。 如果链接文本中有任何中断，则下划线仅适用于最低行。 如果将鼠标悬停在此示例上，您会看到这一点。

在我们看来，这肯定会破坏交易，这就是我们更喜欢第一个代码片段的原因。

如何在 WordPress 中设置链接样式

实际上，在 Word press 中设置超链接的样式相当容易。 您需要做的就是将代码复制并粘贴到 CSS 编辑器中，然后将其应用于 WordPress 网站上的样式。 您可以通过多种方式做到这一点，但将自定义 CSS 应用于 WordPress 的最简单和最简单的方法是使用内置 CSS 编辑器，该编辑器可以在外观 --> 自定义下找到。

（你也可以使用这个插件，即使你的主题改变了，它也会应用 CSS。）

自定义界面弹出后，只需单击自定义 CSS 选项卡（通常是菜单中最低的链接）并粘贴您的代码。 单击发布按钮，超链接样式应应用于您的 WordPress 网站。

请记住，基本代码会将链接下划线样式应用于整个 WordPress 网站。 在某些情况下，这是您想要的，但在其他情况下，您只希望超链接样式应用于 Content。

在我们的网站上，我们已指定（使用 CSS）超链接样式应仅适用于博客文章内容。

我们通过使用元素 ID 专门选择帖子内容来做到这一点，如下所示：

 #post-content a {你的代码在这里}

这样做因主题而异，因为有些实际上会标记围绕帖子内容的包装器，而另一些则不会。 您使用的实际方法和选择器对于您自己的网站是独一无二的。 您可以使用 Chrome Dev Tools 之类的开发人员工具包来找出围绕您的帖子内容的选择器并将其应用到代码中。

结论

本文应该已经向您介绍了在您的 WordPress 网站上更改和动画超链接的概念。 这是向任何站点添加自定义触摸的好方法，代码相当简单且易于应用，并且可以通用。

如果您对将 CSS 样式应用于 WordPress 中的超链接有任何疑问，请随时在评论中联系。