For each and every element want to add unique content:url(); : <p>When I hover over word it should shows an appropriate pict as background</p>

<p>Considering to make it with js dataset but it still won't work</p>

<pre class="lang-html prettyprint-override"><code>       &lt;ul&gt;
         &lt;li&gt;&lt;a  href="#"&gt;word&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a  href="#"&gt;word2&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a  href="#"&gt;word3&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a  href="#"&gt;word4&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>
 li a {
      display: block;
      text-decoration: none;
      font-size: 3.3rem;
      color: $dark-clr;
      padding: 10px;
      transition: all 0.4s ease;
      font-weight: bold;
      letter-spacing: 1.2px;
      text-transform: capitalize;

      &amp;:hover {
        color: $icons-clr;
      }
    }
    li a::before {
      content: url(/pict/1.jpg);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      z-index: -1;
      transition: all 0.4s ease;
    }

    li a:hover::before {
      opacity: 0.5;
    }

</code></pre>

<p>Can't use attr src</p>
