title: For each and every element want to add unique content:url();
body: <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>