javascript - 谁能告诉我为什么我的按钮不显示内容？

Question

我正在使用 HTML/JS 制作自定义视频播放器，但是我遇到了一个非常奇怪的问题。我有两个按钮不显示它们的内容，特别是快进和倒带按钮。我已经尝试了所有方法，但无法让它们在 CSS 中显示内容。知道他们为什么不显示吗？

   #ff {
     content: url("https://img.icons8.com/ultraviolet/80/000000/fast-forward.png");
   }
   #rw {
     content: url("https://img.icons8.com/ultraviolet/80/000000/rewind.png");

https://jsfiddle.net/9sqdvg2n/#

谢谢!

Answer 1

CSS content 属性仅适用于::before 和::after 伪元素。 MDN 文档提供的示例:

q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before  {
  content: "Chapter ";  /* The trailing space creates separation
                           between the added content and the
                           rest of the content */
}

<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
    lucky enough to invent the Web at the time when the Internet
    already existed - and had for a decade and a half.</q>
  We must understand that there is nothing fundamentally wrong
  with building on the contributions of others.
</p>

<h1>6</h1>
<p>According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
    must have the ability to shape the Internet and
    their own experiences on the Internet.</q>
  Therefore, we can infer that contributing to the open web
  can protect our own individual experiences on it.
</p>

::before 伪元素将内容放在指定元素 (p::before) 之前。

::after 伪元素将内容放在指定元素之后。