css - Wordpress 菜单三 Angular 形插入符号

Question

尝试在我的 wordpress 菜单中添加一个三 Angular 形插入符。从 css 三 Angular 形生成器中获取三 Angular 形，并简单地添加到 a:hover 样式中。两个问题是: 1)它不会保持原始尺寸(15px 宽和 10px 长)并获得 li 的宽度，调整高度 2)只看到部分高度。其余的隐藏在链接下

#btmn ul li a:hover {
font-size: 14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 7.5px 0 7.5px;
border-color: #4f69bf transparent transparent transparent;
}

直播链接在这里 http://soloveich.com/pr4/

Answer 1

你可以使用另一个元素，或者你可以使用像 :after 这样的伪类——并不是所有的浏览器都会为 :after 设置动画——所以这是主要的缺点——但它比拥有一个完整的其他元素更具语义有些人会争辩说，只是为了一个三 Angular 形。对定位的基本了解是关键。我试图留下好的笔记。祝你好运! - jsfiddle

html

<nav class="special-nav">
    <ul class="menu">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
    </ul>
</nav>

CSS

.menu {
    float: left; /* or not */
    list-style: none;
    margin: 0; padding: 0;
    overflow: hidden; /* $shame use a clear fix instead */

    border: 1px solid rgba(0,0,0,.02); /* just so you can see */
}

.menu li {
    float: left;
}

.menu a {
    position: relative; /* so you can position things absolutely to its borders */
    display: block; /* to give the shape */
    padding: 1em;
    text-decoration: none;
}

.menu a:after {
    content: "\0020"; /* because you need something in this pseudo element for it to work */
    position: absolute; /* to position based on parent */
    top: 0;
    left: 50%; /* to center-ish */
    margin-left: -5px; /* basically half your triangle width  for further centering */

    /* triangle */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7.5px 0 7.5px;
    border-color: transparent;

    transition: all .3s linear; /* or not */
}

.menu a:hover:after {
    border-color: #4f69bf transparent transparent transparent;
    transition: all .1s linear;
}