html - 使用 :Before and :After to add images to the end of my navigation?

Question

想知道这是否是将图像添加到我的导航的开头和结尾的最佳方法。就目前而言，我的导航看起来像这样:

但实际上我想将这个 Angular block 添加到它的边缘:

这是我尝试实现它的 CSS:

#menu-top {
    position:relative;
    margin:0 -10px 0;
    padding:.25em 0 0;
    border-width:0;
    color:#fff;
    text-align:left;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontalbannermiddletop.png );

    min-height:50px;
}
#menu-top:before {
    content:'';
    z-index: 20;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png );
    position:absolute;
    left:0;
    /* bottom:-5px; */
    bottom: 0px;
    width:0;
    height:0;
    display:block;
    border-color:transparent #222 transparent transparent;
    border-style:solid;
    border-width:0px 10px 5px 0;
}
#menu-top:after {
    content:'';
    position:absolute;
    right:0;
    bottom:-5px;
    width:0;
    height:0;
    display:block;
    border-color:transparent transparent transparent #222;
    border-style:solid;
    border-width:0 0 5px 10px;
}
#menu-top ul {
    position:relative;
    margin:0;
    padding:.5em 30px;
    list-style-type:none;
    text-align:center;
}
#menu-top ul:before {
    content:'';
    position:absolute;
    top:4px;
    left:-5px;
    width: 34px;
    height: auto;
    display:block;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png );
}
#menu-top ul:after {
    content:'';
    position:absolute;
    top:4px;
    right:-5px;
    width:27px;
    height:39px;
    display:block;
}
#menu-top li {
    display:inline;
    margin:0 .25em 1em;
    padding:0;
    line-height:2.5em;
}
#menu-top li a {
    background-color: #111;
    color: #e9d6d6;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    outline: 0;
    padding: .45em .6em;
    white-space: nowrap;
    -webkit-transition: background-color, -webkit-box-shadow 0.2s linear;
}
#menu-top li a:hover,
#menu-top li a:active {
    text-decoration:none;
}

我是不是在使用 :Before 和 :After 错了？

Answer 1

您可以通过多种方式做到这一点，包括使用伪元素。在下文中，我将两个元素放置在 nav 元素的左上角和右上角。然后，我分配了新的背景图片，并将元素向右翻转，使其与左侧的元素相映成趣:

nav {
    position: relative;
    width: 703px; height: 45px;
    background: url("http://i.stack.imgur.com/PMV59.png");
}

nav::before, nav::after {
    content: "";
    display: block;
    width: 95px; height: 50px;
    position: absolute; top: -8px; left: -5px;
    background: url("http://i.stack.imgur.com/IqsBV.png");
}

nav::after {
    left: auto; right: -5px;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

结果如下:

我应该注意到 transform 属性之所以被使用，是因为您只提供了左 Angular 图像。 Internet Explorer 8 将不支持此属性(支持 :before 和 :after)。如果您希望以上支持 IE8，则需要放弃 transform，而是为 :after 伪元素提供不同的背景。

演示:http://jsfiddle.net/NXP3g/1/