title: How to use "display: none;" on a span element which is inside a title attribute?
body: <p>Im using the social-share-button gem to share blog post on social media. I have internationalized the website meaning the website is bilingual (english and german). Everything works fine but I have an issue on the social share buttons if I switch to german: </p>
  
  <p><strong>show.html.erb</strong></p>
  
  <pre><code>&lt;div id="share_box"&gt;
      &lt;% if I18n.locale == :de %&gt;
          &lt;h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms"&gt;Teile diesen beitrag&lt;/h3&gt;
      &lt;% else %&gt;
          &lt;h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms"&gt;Share this Post&lt;/h3&gt;
      &lt;% end %&gt;
      &lt;div class="wow fadeIn" data-wow-duration="1400ms" data-wow-delay="200ms"&gt;
          &lt;% if I18n.locale == :de %&gt;
              &lt;%= social_share_button_tag(@post.title_de, :url =&gt; post_url(@post)) %&gt;
          &lt;% else %&gt;
              &lt;%= social_share_button_tag(@post.title_en, :url =&gt; post_url(@post)) %&gt;
          &lt;% end %&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>English:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/woAdp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/woAdp.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="Share to Twitter" href="#"&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>German:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/mTRVy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mTRVy.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="&lt;span class=" translation_missing"=""&gt;Share To" href="#"&amp;gt;&lt;/a&gt;
  </code></pre>
  
  <p>As you can see there is a translation missing inside the gem and thats why this ugly text appears! To solve this issue I want to not display the text with css. Unfortunately I have huge issues to trigger the text!</p>
  
  <p>This is so far what I have tried:</p>
  
  <p><strong>1) Had zero effect</strong></p>
  
  <pre><code>.translation_missing {
    display: none !important;
  }
  </code></pre>
  
  <p><strong>2) The whole icons disappeared</strong></p>
  
  <pre><code>a[title] {
    display: none !important;
  }
  </code></pre>
  
  <p><strong>3) Tried to get rid of it with JavaScript (Only the hover text disappeared)</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("a").removeAttr("title");
  });
  </code></pre>
  
  <p>Hover text was: </p>
  
  <pre><code>&lt;span class=
  </code></pre>
  
  <p>Element on Inspect with JavaScript:</p>
  
  <pre><code>&lt;a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" translation_missing"=""&gt;Share To" href="#"&amp;gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>If anyone has any hints how to solve this issues and remove this ugly text I would be very happy! Thanks in advance!</strong></p>