title: disable underline when hovering on specific text inside li
body: <p>I have these piece of code:</p>
  <pre><code>&lt;nav role=&quot;navigation&quot; class=&quot;toc&quot;&gt;
    &lt;span class=&quot;toc-title&quot;&gt;Title:&lt;/span&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Some Text &lt;textstyle&gt;non-underlined text&lt;/textstyle&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>I want that when hovering over the <code>&lt;li&gt;</code> element, only <code>Some Text</code> will be underlined, while the text inside <code>textstyle</code> element will not be underlined.</p>
  <p>I have tried:</p>
  <pre><code>textstyle:hover, li a textstyle:hover, a &gt; textstyle:hover{text-decoration: none;}
  </code></pre>