下線付きリンクのクリック数を無効にする？

[j127]

リンクが下線付きの場合、クリック数を無効にする方法をご存知の方はいらっしゃいますか？（アクセシビリティのためにリンクを下線にしています[WebAIM: Links and Hypertext - Link Text and Appearance]。）

以下のCSSでクリック数を非表示にしました：

span.badge-notification.clicks {
    display: none;
}

しかし、リンクテキストの後に下線付きの空白が表示されてしまいます：

HTML は以下のようになっています：

<em dir="ltr">
    <strong dir="ltr">
        <a href="https://example.com/" dir="ltr">
            リンクテキスト <span class="badge badge-notification clicks" title="785 clicks" dir="ltr">785</span>
        </a>
    </strong>
</em>

<span> の開始直前のその余分なスペースを除去する方法はありますか？

（クリック数が非表示でなくても問題が発生します。下線がその余分なスペースまで伸びてしまうためです。）

[Don]

こんにちは、Joshさん

実際に display: inline-block; が魔法のように働きます。

.cooked a {
    text-decoration: underline;
    font-weight: bold;
    display: inline-block;
}

[j127]

ありがとうございます、うまくいきました。