How to change a link's line-through / strikethrough color?
<p>I have a link that has a strikethrough.  I want to make the strikethrough lighter so the link text is easier to read, but can't figure out how to do it.</p>

<p>Here's what I want it to look like (using an inner span instead of a link because it comes out the way I want):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>span.outer {
  color: red;
  text-decoration: line-through;
}
span.inner {
  color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="outer"&gt;
  &lt;span class="inner"&gt;foo bar&lt;/span&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>But this doesn't seem to work:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>span.outer {
  color: red;
  text-decoration: line-through;
}
a.inner {
  color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="outer"&gt;
  &lt;a href="#" class="inner"&gt;foo bar&lt;/a&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>Any ideas?</p>