Question

我有一个具有静态和悬停状态的按钮。

现在有一个小的向下箭头图像，它位于文本之后：class。我不得不使用：之前：之后有悬停效果。由于悬停效果：课后没有显示小箭头图像，所以我不得不使用：之前和绝对定位，以便在文本之后定位该图像。

问题是文本长度可以变化，因为它是绝对位置，所以有时图像位于文本内部而不是文本之后。

这是代码

<button type="submit" class="button uppercase btn-1b">home</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b">development</button>

Demo: Example of short and long text with image(small down arrow)

非常感谢任何帮助。提前谢谢。

Answer 1

我建议利用以下事实：<button>元素可以包含子元素，并使用<span>包装文本，然后使用 - 更合适::after伪元素：

<button type="submit" class="button uppercase btn-1b"><span>home</span>
</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b"><span>development</span>
</button>

将以下CSS用于未悬停和悬停状态：

.button span:after {
    background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
    background-repeat: no-repeat;
    content:"";
    display: inline-block;
    height: 5px;
    width: 8px;
    margin-left: 0.5em;
}

.button:hover span:after {
    background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}

＆＃13;

.button span:after {
  background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 5px;
  width: 8px;
  margin-left: 0.5em;
}
.button:after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 4.1rem;
  transition: all 0.3s ease 0s;
  z-index: -1;
}
.uppercase {
  text-transform: uppercase;
}
.button {
  color: white;
  position: relative;
  z-index: 1;
  background: #000;
  border: 1px solid #9d9368;
  font-size: 17px;
  padding: 0.5rem 2rem;
  width: 220px;
  display: inline-block;
  cursor: pointer;
}
.btn-1b:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background: #b0a479;
}
.btn-1b:hover,
.btn-1b:active {
  color: #000000;
}
.btn-1b:hover:after,
.btn-1b:active:after {
  height: 100%;
}
.button:hover span:after {
  background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}

＆＃13;

<button type="submit" class="button uppercase btn-1b"><span>home</span>
</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b"><span>development</span>
</button>

＆＃13;

JS Fiddle demo

Answer 2

与:before :after

互换

删除position: absolute;以获取箭头

＆＃13;

.uppercase {
    text-transform: uppercase;
}

.button {
    color: white;
    position: relative;
    z-index: 1;
    background: #000;
    border: 1px solid #9d9368;
    font-size: 17px;
    padding: 0.5rem 2rem;
    width: 220px;
    display: inline-block;
    cursor:pointer;
}

.button:after {
    background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
    background-repeat: no-repeat;
    content:"";
    height: 5px;       
    width: 8px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;   
}
.button:before {
    content:"";
    position: absolute;
    top: 1.1rem;
    right: 4.1rem;    
    transition: all 0.3s ease 0s;
    z-index: -1;    
}
.btn-1b:before {
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #b0a479;
}
.btn-1b:hover, .btn-1b:active {
    color: #000000;
}
.btn-1b:hover:before, .btn-1b:active:before {
    height: 100%;
}
.button:hover:after {
    background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");       
}

＆＃13;

<button type="submit" class="button uppercase btn-1b">home</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b">development</button>

＆＃13;

使用绝对位置的文本后的图像：课前

2 个答案: