CSS

Question

我有一个带有伪元素 ::after 的按钮（标签 a）。问题是元素在 chrome 和 firefox

中看起来不同

Google Chrome:

火狐浏览器：

我的代码是：

<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

我将 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 2

我调整了字体大小。但是，这不是正确的实现。我建议您对人字形右图标使用 glyph-icons 或 font awesome。 fiddle 这里：- fiddle

font-size: 17px;

Answer 3

您的代码需要一些修正。

DEMO

所以，首先，您在相对定位的元素上使用了 top: 和 right: 声明，这实际上不是 required/redundant。

您在伪元素上使用了 padding/margins，这并不是一个好主意。这也包括 'reusing' 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>

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

CSS - ::after has another padding in Chrome and Firefox

firefox

google-chrome

pseudo-element