html - 使用 CSS 在 WordPress 中的当前页面下添加小箭头

Question

我有一个菜单，其中一种渐变类型用于默认状态，另一种用于悬停/事件状态。当前页面就像悬停/事件状态，但下方有一个箭头。我想不出让那个箭头出现的最好方法。我尝试了边框图像，但看起来不对，因为按钮大小因菜单项的长度而异。这是我用来创建两种不同样式的当前 CSS:

.main-nav li a {
    float: left;
    font-size: 15px;
    color: #333;
    padding: 10px 15px;
    text-shadow: 1px 1px #DDD;
    border-right: 1px solid rgba(0, 0, 0, .3);
    border-left: 1px solid rgba(255, 255, 255, .5);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.0, #B3D09E),
        color-stop(0.75, #A0B88E)
    );
    background-image: -o-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
    background-image: -moz-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
    background-image: -webkit-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
    background-image: -ms-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
    background-image: linear-gradient(to bottom, #B3D09E 0%, #A0B88E 75%);
    transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    -webkit-transition: all 300ms;
}
.main-nav .current-menu-item a, .main-nav .current-page-ancestor a, .main-nav li a:hover {
    color: #FFF;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #043420),
        color-stop(1, #075A36)
    );
    text-shadow: none;
    background-image: -o-linear-gradient(bottom, #043420 0%, #075A36 100%);
    background-image: -moz-linear-gradient(bottom, #043420 0%, #075A36 100%);
    background-image: -webkit-linear-gradient(bottom, #043420 0%, #075A36 100%);
    background-image: -ms-linear-gradient(bottom, #043420 0%, #075A36 100%);
    background-image: linear-gradient(to bottom, #043420 0%, #075A36 100%);
}

如果可以的话，我想避免使用 jquery。我觉得应该有一些方法可以只使用 CSS 而不是使用 jquery 将图像放在按钮的中心。我是否在每个按钮下方放置一个不可见的 div，箭头图像居中并将其显示在当前页面上？

这就是我的菜单要遵循的内容。他们没有使用完全正确的术语。图像的“事件”部分是当前页面样式:

Answer 1

您可以在 CSS 中使用伪元素来添加内容，例如 ::after。通过使用具有不同宽度和颜色的边框属性，您可以获得三 Angular 形。唯一可能有点棘手的是，如果您需要渐变以继续指向箭头。

我整理了一个小演示。将鼠标悬停在菜单中的链接上以查看箭头。

DEMO

li:hover::after {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    border-color: #222 transparent transparent transparent;
}