# Style internal and external links differently **URL:** \ **Category:** Support\ **Created:** [October 2, 2022, 12:29pm UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501 "2022-10-02T12:29:14Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![rainij](https://avatars.discourse-cdn.com/v4/letter/r/ecccb3/32.png) [@rainij](https://zola.discourse.group/u/rainij)\ **Post date:** [October 2, 2022, 12:29pm UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/1 "2022-10-02T12:29:14Z")
I would like to style external links like `[foo](https://bar.org)` different to internal links like `[foo](@/bar/baz.md)`. For example to add an svg image `::after` the link-text of all _external_ links as for example wikipedia does. It would be nice to still use standard markdown links. Zola seems to know which links are external and which are internal (the config option `external_links_target_blank` suggests that this is the case). So it would be good if I could use that information from css (somehow). Currently I use a shortcode `extlink.html` for external links, where I add a css-class: ```auto {{ body }} ``` I like that this is very explicit. But I still prefer writing pure markdown for links. I don’t want to rely on heuristics which analyze the url (note that `zola serve` does not use the base\_url). Is there a solution where I just write ordinary markdown links in my content files? ---
**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\ **Post date:** [October 3, 2022, 8:46am UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/2 "2022-10-03T08:46:37Z")
That can be done via CSS directly. You do need to hardcode your domain name in the CSS but not a huge deal imo? ---
**Author:** ![rainij](https://avatars.discourse-cdn.com/v4/letter/r/ecccb3/32.png) [@rainij](https://zola.discourse.group/u/rainij)\ **Post date:** [October 3, 2022, 10:37am UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/3 "2022-10-03T10:37:30Z")
This is part of what I meant with “analyzing” the url. I wanted a solution which just works everywhere (without additional setup), even when I serve it in my local network to view how it looks on my tablet (then the domain is the local ip address of my computer). That is the main reason I preferred the shortcode over that. I can live with my workaround via shortcode (probably for others it isn’t even a workaround since it is really flexible, just the syntax is not very beautiful for such simple thing like a link imo). Would you think that implementing a mechanism that propagates zolas knowledge about which links are internal vs external to the final HTML (e.g. via css class like above) would be a good thing? Just want to know your opinion. ---
**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\ **Post date:** [October 3, 2022, 12:07pm UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/4 "2022-10-03T12:07:30Z")
> [@rainij](#): > > Would you think that implementing a mechanism that propagates zolas knowledge about which links are internal vs external to the final HTML (e.g. via css class like above) would be a good thing? Probably not. Most people can do `a[href=^http://mydomain], a[href=^http://localhost]`. Needing a specific IP is kinda niche imo ---
**Author:** ![rainij](https://avatars.discourse-cdn.com/v4/letter/r/ecccb3/32.png) [@rainij](https://zola.discourse.group/u/rainij)\ **Post date:** [October 3, 2022, 12:33pm UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/5 "2022-10-03T12:33:24Z")
OK good to know. I was just thinking that something like `external_link_css_class = "my-css-class"` in `config.toml` would be very similar to the already existing option `external_link_target_blank = true`. It could just add the specified css class to the anchor-element in a similar way how `target="_blank"` is added by the latter (already existing) option. For symmetry reasons `internal_link_css_class` could also be provided. But I am no web-developer and also new to zola so I do not know if this would be a good feature in general (for example because others would classify links in yet another way leading to an explosion of options or something like that). ---
**Author:** ![welpo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/welpo/32/1087_2.png) [@welpo](https://zola.discourse.group/u/welpo)\ **Post date:** [November 28, 2024, 2:04pm UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/6 "2024-11-28T14:04:40Z")
> [@keats](#): > > That can be done via CSS directly. You do need to hardcode your domain name in the CSS but not a huge deal imo? The problem with this approach is that themes can’t provide the feature. I’m trying to use `config.toml` exclusively for theme setup, and avoid asking users to move or copy or edit CSS. For now, I can achieve this with JavaScript, but it feels wasteful. > [@rainij](#): > > to add an svg image `::after` the link-text of all _external_ links as for example wikipedia does This is my exact use-case. Would you take a PR for this change? ---
**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\ **Post date:** [November 29, 2024, 8:34am UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/7 "2024-11-29T08:34:23Z")
> [@welpo](#): > > Would you take a PR for this change? To add an optional class on external links? Sure ---
**Author:** ![welpo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/welpo/32/1087_2.png) [@welpo](https://zola.discourse.group/u/welpo)\ **Post date:** [November 30, 2024, 11:13am UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/8 "2024-11-30T11:13:28Z")
PR opened: [Add external links class option to Markdown configuration by welpo · Pull Request #2717 · getzola/zola · GitHub](https://github.com/getzola/zola/pull/2717) ---
**Author:** ![sharyt](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sharyt](https://zola.discourse.group/u/sharyt)\ **Post date:** [January 14, 2025, 11:26am UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/9 "2025-01-14T11:26:26Z")
> [@rainij](#): > > I would like to style external links like `[foo](https://bar.org)` different to internal links like `[foo](@/bar/baz.md)`. For example to add an svg image `::after` the link-text of all _external_ links as for example wikipedia does. It would be nice to still use standard markdown links. Zola seems to know which links are external and which are internal (the config option `external_links_target_blank` suggests that this is the case). So it would be good if I could use that information from css (somehow). > > Currently I use a shortcode `extlink.html` for external links, where I add a css-class: > > ```auto > > {{ body }} > > > ``` > > I like that this is very explicit. But I still prefer writing pure markdown for links. I don’t [want to](https://menuland.ph/mcdonalds-philippines-menu-prices/) rely on heuristics which analyze the url (note that `zola serve` does not use the base\_url). > > Is there a solution where I just write ordinary markdown links in my content files? CSS to style external links written in Markdown by targeting `a:not([href^="/"])` for links not starting with `/` (external). Example: ```auto a:not([href^="/"])::after { content: url('external-icon.svg'); margin-left: 0.3em; } ``` This approach keeps Markdown simple without extra shortcodes. ---
**Author:** ![welpo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/welpo/32/1087_2.png) [@welpo](https://zola.discourse.group/u/welpo)\ **Post date:** [January 18, 2025, 1:23pm UTC](https://zola.discourse.group/t/style-internal-and-external-links-differently/1501/10 "2025-01-18T13:23:32Z")
> [@sharyt](#): > > CSS to style external links written in Markdown by targeting `a:not([href^="/"])` for links not starting with `/` (external). If you use Zola’s [Internal links](https://www.getzola.org/documentation/content/linking/#internal-links), this won’t work: all links include the base URL and will be treated as external.