悬停和焦点菜单的自定义下划线答案

【问题标题】：Custom underline for a menu on hover and focus悬停和焦点菜单的自定义下划线
【发布时间】：2017-03-11 18:05:09
【问题描述】：

我想使用this 图像作为悬停和聚焦（或激活时）菜单项的下划线。我已经尝试了很多东西，但无论如何图像都不会出现。正常的文本装饰下划线可以正常工作。我正在使用空白状态主题。任何建议和想法将不胜感激。该图像与我要使用的自定义 css 位于同一文件夹中。您可以查看示例站点here。 This 问题的答案我猜这里不适用。我也试过this。顺便说一句，我假设

<link rel="stylesheet" type="text/css" href="path_to_css" />

由主题自动处理，如果没有，我如何访问头文件以确保完成。我正在使用 elementor 来编辑页面。

提前谢谢大家。

【问题讨论】：

如果有人在投反对票后解释投反对票，我会很高兴的。谢谢。

标签： css wordpress

【解决方案1】：

试试这个 CSS：

a:hover, a:hover, a:focus {
    text-decoration: none;
    background-image: url('http://i.imgur.com/bYYfllb.png');
    background-size: 100% 18px; /* stretch to link width but keep its height */
    background-repeat: no-repeat; /* do not repeat the image */
    background-position: bottom;
    padding-bottom: 8px; /* move image below the text */
}
a {
    text-decoration: none;
}

Test &lt;a href="#"&gt;link&lt;/a&gt; and &lt;a href="#"&gt;with a longer link text&lt;/a&gt;

【讨论】：

嘿，谢谢，但正如@Georgiy Dubrov 首先回答的那样，我想我必须先接受他。但我肯定会因为给出的见解而赞成这一点。此外，我发现只有 y 位置我必须仅以百分比定义 y 位置才能正常工作。
@guthik 如果此答案对您更好，请将其标记为解决方案。对我来说，谁是第一个不是问题。
选择回答您问题的内容，请不要后悔:)
好的，现在很难。我最初的问题是显示图像。声明尺寸（Georgiy）起到了作用。但是 Fabian 在代码的放置和理解方面提供了很多帮助。所以我现在只坚持第一选择。非常感谢。现在我将努力使所有元素的下划线宽度相同，并将单词放在下划线的中心。即使我需要添加额外的空格。

【解决方案2】：

您需要设置 background-size 属性。之后照顾它的位置

例如，背景尺寸：100%

【讨论】：

但是是你否决了这个问题，如果是，你能解释一下原因吗？
不，不是我。
哦，好吧，我只是不想再犯同样的错误。这就是为什么:)
下次尝试提出一个明确的问题，以避免任何对一个简单问题的复杂问题感到惊讶的人投反对票。只需解释您的问题，最后解释您使用了哪些资源来实现目标。例如，您发布的代码对您的问题并不重要...
哦，谢谢法比安。但我想，当我使用 wordpress 时，有必要说清楚。因为我不是在 wordpress 中明确写下该声明的人。这是模板。