LNA LNA - 1 month ago 7
CSS Question

Add a CSS class to a link in RST

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

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>