使用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。通过使用具有不同宽度和颜色的border属性，您将获得三角形形状。唯一可能有点棘手的是你需要渐变来继续箭头。

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

<强> 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;
}