Skip to main content
Inspiring
Jun 2, 2025 10:38 PM UTC
Answered

Changing the text decoration style

Hi

I'm trying to style text that triggers popups differently to text that triggers links (a dotted underline rather than the standard solid underline). The RH styles UI doesn't appear to give this option, so I've tried adding the following to the code:

<a href="myfile.htm"><span style="text-decoration-style: dotted;">Users</span></a>

Alas, the <a> style unexpectedly overrides the embedded <span> and the underline remains as a solid line.

Have I flubbed the coding ? Is this a deficiency in RH? Are there other tricks you can share?

TIA

Geoffrey

    David KinyonCorrect answer
    Inspiring
    Jun 4, 2025 7:23 PM UTC

    I was able to put it into the CSS as follows: 

    a.dotted {

       text-decoration-style: dotted;

    }

     

    And then in the source, it looks like:

    <a class="dotted" href="myfile.htm">Users</a>

     

    Using this method, you can apply it without needing to edit the XML source:

    1. Create your link the normal way.
    2. Select the linked text.
    3. In Content Properties > Attributes > Class, type dotted.

    6 replies

    misterjordan845
    Participant
    Apr 13, 2026 11:19 AM UTC

    The issue isn’t your coding—it's CSS specificity: the <a> tag’s default styles override your <span>; instead, apply the dotted underline directly to the <a> using CSS (e.g., a { text-decoration-style: dotted; }) or create a specific class for popup links to style them differently.

    Translate
    Inspiring
    Jun 4, 2025 4:37 PM UTC

    Try this instead, it works for me (RH 2022.6.34, output tested in Chrome & Firefox):

    <a href="myfile.htm" style="text-decoration-style: dotted;">Users</a>

    I did not test putting this into the CSS, that would certainly be preferred, although given that it doesn't work in a span I wonder if it would work in a class.

    Translate
    David KinyonCorrect answer
    Inspiring
    Jun 4, 2025 7:23 PM UTC

    I was able to put it into the CSS as follows: 

    a.dotted {

       text-decoration-style: dotted;

    }

     

    And then in the source, it looks like:

    <a class="dotted" href="myfile.htm">Users</a>

     

    Using this method, you can apply it without needing to edit the XML source:

    1. Create your link the normal way.
    2. Select the linked text.
    3. In Content Properties > Attributes > Class, type dotted.
    Translate
    Inspiring
    Jun 4, 2025 9:45 PM UTC

    Thank you David. That's exactly what I wanted.

    Cheers

    Geoffrey

    Translate
    Jeff_Coatsworth
    Community Expert
    Community Expert
    Jun 3, 2025 11:28 AM UTC

    Have you looked at doing this through the CSS instead of trying to style the HTML?

    Translate
    Inspiring
    Jun 4, 2025 9:47 PM UTC

    Thanks Jeff. Your suggestion overcomes the problem.

    Chers

    Geoffrey

    Translate