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

Question

我有一个带有伪元素::after 的按钮(标签a)。问题是元素在 chrome 和 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: 声明，这并不是真正必需/多余的。

您在伪元素上使用了填充/边距，这并不是一个好主意。这还包括“重用”px 高度而不是父级的 100%。

还有其他一些小的改动，尽管我说的这些都是小改动。

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;
}

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