在<a> in CSS</a>旁边附加图片

Question

我不确定使用css的正确方法是什么。

我的设计中有这样的元素。

我现在拥有的是2＆＃34; a＆＃34;元素，其中一个有.active类。

    <div class="botones_menu">
        <a href="#" class="active">Mis anuncios publicados</a>
        <a href="#">Publicar nuevo anuncio</a>
    </div>

我需要做的是附上这张图片：

旁边的＆＃34; a＆＃34;具有.active类的元素

.botones_menu { padding-top: 15px; padding-bottom: 15px;}
.botones_menu > a { font-weight: normal; font-size:12px; color:#FFF; background-color: #00652e; display: block; padding: 10px; padding-left: 30px; border:1px solid #9faca5; margin-left:2px; margin-top: 10px; margin-bottom: 10px;}
.botones_menu > a.black {background-color:#000;}
.botones_menu > a.active { background-color: #6bb90f; background-image: url(imagenes/green_arrow.png); background-position: right; background-repeat: no-repeat; }

Answer 1

使用CSS背景图片：

.active {
   display:block;
   background-image:url(...);
   background-repeat:no-repeat;
   width:200px;
   background-position:180 0;
   padding-right:20px;
}

调整填充，宽度和背景位置以适合您的图像。

Answer 2

您可以使用伪元素。如果您为活动（或两者）菜单项提供右边距，则可以在其右侧放置一个伪元素。

您还需要更改活动菜单项的position：

＆＃13;

＆＃13;

.botones_menu {
    padding-top: 15px;
    padding-bottom: 15px;
}
.botones_menu > a {
    font-weight: normal;
    font-size:12px;
    color:#FFF;
    background-color: #00652e;
    display: block;
    padding: 10px;
    padding-left: 30px;
    border:1px solid #9faca5;
    margin-left:2px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.botones_menu > a.black {
    background-color:#000;
}
.botones_menu > a.active {
    margin-right:17px; /* Image width */
    position:relative;
    background-color: #6bb90f;
    background-position: right;
    background-repeat: no-repeat;
}
.botones_menu > a.active:after {
    display:block;
    width:17px;  /* Image width */
    height:35px;   /* Image height */
    content:'';
    right:-17px;   /* -(Image width) */
    top:0;
    position:absolute;
    background-image: url(http://i.stack.imgur.com/4WRHT.png);
}

＆＃13;

<div class="botones_menu">
  <a href="#" class="active">Mis anuncios publicados</a>
  <a href="#">Publicar nuevo anuncio</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

之前没有注意到CSS样式，所以我不得不重做之前的代码。

这是新的Codepen： http://codepen.io/anon/pen/ZYzqGq

HTML

<div class="botones_menu">
    <a href="#" class="active">Mis anuncios publicados</a>
    <a href="#">Publicar nuevo anuncio</a>
</div>

CSS：

.botones_menu {
  padding-top: 15px;
  padding-bottom: 15px;
}

.botones_menu > a {
  font-weight: normal;
  background-color: #6BB90F;
  display: block;
  padding: 10px;
  padding-left: 30px;
  border:1px solid #9faca5;
  margin-left:2px;
  width: 200px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
}

.botones_menu > a.black { background-color:#000; }

.botones_menu > a.active {
  background-color: #6BB90F;
  height: 16px;
}

.botones_menu a.active:after {
  content: url('http://i.stack.imgur.com/4WRHT.png');
  position: relative;
  display: block;
  clear: both;
  left: 100%;
  top: -30px;
  margin-left: 11px;
}

Answer 4

这对我有用：

http://codepen.io/anon/pen/ogvavv

使用：之前的CSS伪选择器：

.botones_menu a.active:before {
  content: url('http://i.stack.imgur.com/4WRHT.png');
}