Help needed - single letter underline (different colour underline)

Mark M · 2025-02-07T12:28:29+0000

Strange request but as part of a rebrand I have an orange underline on the letter O (black text). My logo has an O underlined and as part of the new brand an unlined O appears in various places.

Looking at the website draft, does anyone know if its possible to add an underline (in orange) to a single letter in a word? For example, say I've got a title of "Frequently asked Questions", is there a way to underline the o in question? Or "How's The Dog" could you add an underline to o in dog and not the How's?

Can CSS do this or will I need to look at using images of the word/titles?

Hopefully that makes some sense.

Thanks.

Mr Jack · 2025-02-07T12:36:20+0000

You can do it inline easily enough - just create a span with an underline around the target letter - is that good enough or do you need something to happen automatically?

Mark M · 2025-02-07T13:19:04+0000

Can you make the underline a different colour? Eg black letter with orange underline?

radderfire · 2025-02-07T13:25:02+0000

Mark M said:
Can you make the underline a different colour? Eg black letter with orange underline?

Yes. As above you will need to create a class and then apply it in a span. CSS details here:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

throwaway4372 · 2025-02-07T13:25:23+0000

Code:

<html>
<head>
    <style>
        span.o { border-bottom:2px solid orange; }
    </style>
</head>
<body>
    <h2>Frequently asked Questi<span class="o">o</span>ns<h2>
</body>
</html>

Mark M · 2025-02-07T14:25:47+0000

This has nearly worked perfectly but I need the underline to be tight to the letter O and not the bottom of the lowest letter eg the lowercase q. Is there a workaround to this? I know that if you were underlining the whole word it would be at the bottom of the lowest letter but I need it tight to the O. Pic below:

I need it to look like this:

throwaway4372 · 2025-02-07T14:31:59+0000

Didn't even know this was a thing, but this works:

text-decoration-color - CSS: Cascading Style Sheets | MDN

The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.

developer.mozilla.org

Code:

<html>
<head>
    <style>
        span.o { 
            text-decoration: underline; 
            text-decoration-color: orange;
         }
    </style>
</head>
<body>
    <h2>Frequently asked Questi<span class="o">o</span>ns</h2>
</body>
</html>

Mark M · 2025-02-07T14:44:05+0000

throwaway4372 said:
Didn't even know this was a thing, but this works:

text-decoration-color - CSS: Cascading Style Sheets | MDN

The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.

developer.mozilla.org

Code:

<html> <head> <style> span.o { text-decoration: underline; text-decoration-color: orange; } </style> </head> <body> <h2>Frequently asked Questi<span class="o">o</span>ns</h2> </body> </html>

This is awesome thanks, its worked a treat and looks exactly like I need!