Cannot remove text decoration underline
<p>I cannot remove the <code>underline</code> from the following. I've tried setting <code>text-decoration: none</code> on all three classes as well.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>rs-friends-list-row {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 10px 20px 10px 20px;
  font-size: 10px;
}
a .rs-friends-list-row {
  text-decoration: none;
}
a:hover .rs-friends-list-row {
  background-color: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;
  &lt;div class="rs-friends-list-row"&gt;
    &lt;div&gt;
      &lt;img class="rs-friends-user-image" src="assets/images/profileimg1.png" alt="img"&gt;
    &lt;/div&gt;
    &lt;div class="rs-friends-details"&gt;&lt;span class="right-sidebar-friends-name"&gt;Lucile B. Nash&lt;/span&gt;
      &lt;br&gt;Nanaimo&lt;/div&gt;
    &lt;div&gt;&lt;span class="rs-friends-status online"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/a&gt;</code></pre>
</div>
</div>
</p>