Add a CSS class to a link in RST

Question

I have a link in my .rst file that looks like

Click me! <../link_reference.html>

This renders as Click me!. However, I want to add a CSS class to it, so that it'd look like Click me!.

I added the line below to the top of my RST file:

role:: example

Then I changed my link out to look like this:

Example: Click me! <../link_reference.html>

However, this RST renders as <span class="problematic">:example:Click me! <../link_reference.html>_</span> instead. :(

I thought using .. role:: was the best way to add CSS to text in RST. Is there something special I need to do for links?

Answer 1

This gave me some trouble as well. This solution is not great but I was able to do what I needed so hopefully it helps you. It basically adds a div around the link with your class so you can target the and style the link. Depending on what you're doing you'd have to style the div as well.

RST code:

.. container:: myclass

    `google <www.google.com>`_

Output:

<div class="myclass container">
   <a class="reference external" href="www.google.com">
       google
   </a>
</div>