Question

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

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

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

提前谢谢大家。

Answer 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 <a href="#">link</a> and <a href="#">with a longer link text</a>

Answer 2

您需要设置background-size属性。之后，照顾好自己的位置

例如，background-size：100％

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

2 个答案: