Может кто-нибудь сказать мне, почему мои кнопки не отображают контент?

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элемент размещает содержимое после указанного элемента.

Answer 2

Примечание: свойство содержимого должно работать в соответствии со всей документацией, однако кажется, что элемент <button> сопротивляется этому свойству содержимого CSS3!

Если вы используете <span> или <div> или почти любой другой элемент (не <input>, насколько я могу судить), тогда ваш оригинальный CSS будет делать именно то, что вы хотели, чтобы он делал в современных браузерах

---

css content свойство используется только для псевдоэлементов :: after и :: before (и других, таких как :: marker?) - как указано выше content должно работать так же, как выиспользовал его)

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

Должен исправить это