CSS - :: after在Chrome和Firefox中有另一个填充

Question

我有一个带有伪元素:: after的按钮（标记a）。问题是在chrome和firefox中看起来不同的元素

谷歌浏览器：

Mozilla Firefox：

我的代码是：

<a class="play_button" href="#">Some link</a>


a.play_button {
    background-color: white;
    text-decoration: none;
    color: #49bf96;
    position: relative;
    padding: 6px 23px 7px 23px;
    border: solid 1px #49bf96;
    top: 30px;
    right: 12px;
}
a.play_button::after {
    background-color: white;
    content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/darovat_vystoupeni_sipka.png');
    width: 10px;
    height: 16px;
    position: absolute;
    display: block;
    padding: 7px 9px;
    top: -1px;
    right: -28px;
    font-size: 16px;
    color: #49bf96;
    border: solid 1px #49bf96;
    border-left: solid 1px #49bf96;
}
a.play_button:hover {
    background-color: #49bf96;
    color: white;
    border: solid 1px #1c7d5c;
}
a.play_button:hover::after {
    content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/bila_sipka.png');
    background-color: #49bf96;
    color: white;
    border: solid 1px #1c7d5c;
    border-left: solid 1px #1c7d5c;
}

JSFiddle here

我该如何解决？ JSFiddle的答案是最好的。

Answer 1

您的代码中需要一些修复。

<强> DEMO

---

首先，您在相对定位的元素上使用top:和right:声明，这不是真正需要/冗余的。

你在伪元素上使用填充/边距，这不是一个好主意。这还包括重复使用＆＃39; px高度而不是父母的100％。

还有其他一些小的改动，虽然我说的是次要的。

＆＃13;

＆＃13;

a.play_button {
  background-color: white;
  text-decoration: none;
  color: #49bf96;
  position: relative;
  padding: 6px 23px 7px 23px;
  border: solid 1px #49bf96;
  margin-top: 30px;
  margin-right: 12px;
}
a.play_button::after {
  background-color: white;
  content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/darovat_vystoupeni_sipka.png');
  width: 20px;
  height: 100%;
  position: absolute;
  top: -1px;
  right: -10px;
  font-size: 16px;
  text-align: center;
  line-height: 32px;
  color: #49bf96;
  border: solid 1px #49bf96;
  border-left: solid 1px #49bf96;
}
a.play_button:hover {
  background-color: #49bf96;
  color: white;
  border: solid 1px #1c7d5c;
}
a.play_button:hover::after {
  content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/bila_sipka.png');
  background-color: #49bf96;
  color: white;
  border: solid 1px #1c7d5c;
  border-left: solid 1px #1c7d5c;
}

＆＃13;

<a class="play_button" href="#">Some link</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我将width: auto; height: auto;添加到.play_button。

a.play_button {
    background-color: white;
    text-decoration: none;
    color: #49bf96;
    position: relative;
    padding: 7px 23px;
    border: solid 1px #49bf96;
    width: auto; height: auto;
    top: 30px;
    right: 12px;
}

我修改了::after选择器，如padding: 7px 10px; text-align: middle; top: -1px; right: -29px;

查看JSFiddle

Answer 3

我调整了字体大小。但是，这不是正确的实施。我建议你使用字形图标或字体很棒的雪佛龙右图标。 在这里小提琴： - fiddle

font-size: 17px;