html - :hover animation with css content breaks in Safari

Question

我正在使用 viewport-units-buggyfill 来覆盖 vw 和 vh 措施。我必须在 css 中使用 content 来创建良好的回退，一切正常，但是由于我不明白的原因，Safari 不允许我设置动画 :hover 如果代码里面有 css content，问题就在这里(在 Safari 8/Mac 和 iOS8 上测试过)

https://fiddle.jshell.net/nc9chuod/

知道我做错了什么吗？

div {
  border: 1px solid black;
  padding: 20px;
  position: fixed;
  width: 100vw;
  min-height: 50vh;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  content: "not-a-problem";
  overflow: hidden;
}
div:hover {
  -webkit-transform: translate3d(50vw, 0, 0);
  transform: translate3d(50vw, 0, 0);
  content: "not-working";
}

<div id="transition"></div>

Answer 1

content 属性只能在伪元素中使用。

来自 https://developer.mozilla.org/en-US/docs/Web/CSS/content :

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.

这可能是 Safari 中的问题(已在 Safari for Windows 中测试和确认)。尝试将 content:"not-working"; 移动到 div:hover:after 中:

div {
 border: 1px solid black;
 padding: 20px;
 position: fixed;
 width: 100vw;
 min-height: 50vh;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
 overflow: hidden;
}

div:hover {
 -webkit-transform: translate3d(50vw,0,0);
 transform: translate3d(50vw,0,0);
}

div:hover:after {
 content:"not-working";
}

<div id="transition"></div>