# Styling Links in a Markdown Component?

**URL:** <https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522>\
**Category:** Elements\
**Created:** [April 3, 2026, 7:15pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522 "2026-04-03T19:15:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [April 3, 2026, 7:15pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/1 "2026-04-03T19:15:29Z")

</div>

How are we supposed to style links in a Markdown component?

Creating a Markdown typography object with link styling does not appear to work, as the links are never styled. It appears the settings in the typography object are not being respected by Elements.

Is this a known bug, and if it is, when can we expect to see a fix?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 3, 2026, 7:45pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/2 "2026-04-03T19:45:41Z")

</div>

I’ve just tested it here and it’s working fine. I wonder what is causing it in your setup 🤔

Can you share a small test project that shows the issues?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [April 3, 2026, 7:57pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/3 "2026-04-03T19:57:20Z")

</div>

OK, I’ll have to build one to see if I can reproduce it outside the site I’m working on.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [April 3, 2026, 8:24pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/4 "2026-04-03T20:24:32Z")

</div>

@dan It does work fine in most cases, but when you have an ordered list that you want to use a link in, the link is not styled. The minute I changed it to not be a list item, it worked fine. But then when I turned it back into a list item, it stopped working.

There is no way to style links for lists, so I assume it uses the styling from a paragraph, which does not appear to be working.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 3, 2026, 8:59pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/5 "2026-04-03T20:59:30Z")

</div>

Ah-ha! We don’t yet offer controls to style links in lists. For now you’ll need to manually style them. Check the docs for examples and details on how do to this 👇

> **[Styling Lists | CMS | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/cms/cms/markdown/styling-lists)**
>
> Adding styling for lists (ul and ol) in Elements CMS

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [April 3, 2026, 9:20pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/6 "2026-04-03T21:20:19Z")

</div>

I don’t how acceptable or widely used it is, but I’ve been writing markdown and mixing in HTML links for years (it helps us add aria labels). It would also allow you to put in an organized list and add the links.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 3, 2026, 9:49pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/7 "2026-04-03T21:49:28Z")

</div>

This is the wonderful thing about web design, there’s always multiple ways to get the result you need 🥰

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [April 4, 2026, 3:57am UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/8 "2026-04-04T03:57:41Z")

</div>

Hmm, I don’t see anything in these docs that shows how to style links in an ordered list in a markdown file. Can you point me to the code?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 4, 2026, 3:57pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/9 "2026-04-04T15:57:21Z")

</div>

You need to add the `link a` attribute, just ask @elementsbot for the exact style you need and it’ll produce the Tailwind Code for you to paste in 🙂

```auto
[&_ol_li_a]:text-primary
[&_ol_li_a]:no-underline
[&_ol_li_a:hover]:underline

```

This is what I’m using on my personal site I’m just putting together:

```auto
[&_ul]:pb-3
[&_ul]:pt-0
[&_img]:rounded-lg
[&_img]:shadow-sm
[&_img]:my-6
[&_ul_li_a]:text-accent-500
[&_ul_li_a:hover]:text-accent-700
[&_ul_li_a]:underline

```

**Edit:** I’ve also just [updated the docs](https://docs.realmacsoftware.com/elements-docs/cms/cms/markdown/styling-lists) to include an example for links in lists.

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [April 4, 2026, 3:57pm UTC](https://forums.realmacsoftware.com/t/styling-links-in-a-markdown-component/55522/10 "2026-04-04T15:57:24Z")

</div>

When styling links in a Markdown list within Elements, use Tailwind CSS directly in your styling options. To achieve the look you want for links in ordered lists, you can use the following Tailwind code snippet:

```css
[&_ol_li_a]:text-primary
[&_ol_li_a]:no-underline
[&_ol_li_a:hover]:underline

```

This will style the links within your ordered list to have a primary text color, remove underlines by default, and add an underline on hover. If you need to apply this site-wide, consider creating a Custom Component or adding it to your Template under Project Settings.

Remember, sometimes I might be wrong since I’m just a dumb bot, but give this a whirl! If it doesn’t work out, don’t hesitate to ask one of the real experts here like Dan or handshaper. They’ll sort you out.
