Question

我已经尝试了一些解决方法，但是我正在努力！我有一些菜单项，当在当前页面上时，菜单祖先的边框底部指示当前状态。

我希望这条线是波浪形的。我已经尝试过text-decoration-style: wavy，但是浏览器不支持它，它在文本前面放置了波浪线，阻碍了可读性。不过，这几乎具有我要寻找的外观！

我还尝试了SVG，但是由于这些行中的每行都是不同的颜色（我知道，这会变得更加复杂...），所以我不希望浏览器调用太多不同的图像。 / p>

现在我正在尝试示例here。我只是不知道如何获得：before和：after才能工作...伪类对我来说是新的。有什么想法吗？

这是到目前为止我的波浪线。我想在文字后面挥一挥。

编辑：

CSS：

.menu-hover-style-2 .main-navigation-ul > li#menu-item-11853.current-menu-item > a.menu-item-link, .menu-hover-style-2 .main-navigation-ul > li#menu-item-11853.current-menu-ancestor > a.menu-item-link {
color: #000000!important;
text-decoration-line: line-through;
text-decoration-color: #e23d75!important;
text-decoration-style: wavy;
display: block;
}

我正在使用模板的WP网站上工作，因此没有硬编码的HTML。

以前，我有：

`border-bottom: 2px #e23d75 solid;
line-height: 9px;`

或类似的东西。

编辑我已经大致上可以使用它了，但是现在我与:before并不相同。

:after

Answer 1

您可以通过这种方式在之前和之后使用

.nav-item{
    overflow: hidden;
    position: relative;
    width: 200px;
    font-size: 72px;
    color: red;
}

.nav-item:before {
    position: absolute;
    background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
    background-size: 36px 40px;
    width: 200px;
    height: 20px;
    content: "";
    top: 35px;
}

.nav-item:after {
    position: absolute;
    background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
    background-size: 36px 40px;
    width: 200px;
    height: 20px;
    top: 53px;
    left: 18px;
    background-position: 0px -20px;
    content: "";
}

<h1 class="nav-item">About</h1>

链接悬停上的波浪线背景

1 个答案: