Is there a way to make a single link with multiple styles?

I’ve found that if I have a link and change the style of part of it, it breaks the link.

For example, if I have the phrase, “See this article in the New York Times for more” and I make a link it works fine. But if I then italicize “New York Times,” it creates three separate links. One for “See this article in the,” one for “New York Times,” and one for “for more.”

That’s a problem if I want the text to change color when I hover over the link.

I’ve tried removing the hyperlink and reapplying it. I’ve tried italicizing the text and then applying the hyperlink to the whole phrase. Nothing works.

This is an anomaly in Sitely, and maybe it needs a quick note to support to see if it can be fixed in a future update. If you create a multi-word link everything works fine, but by introducing an additional text style within the link, you’re essentially creating what is called a span within a span (that’s HTML speak).

A span is created when a style is introduced into a piece of text that is DIFFERENT from the text surrounding it. If the text in the link is all the same style, Sitely simply adds a css style to the whole piece of text that styles the link and its hover effect. It looks something like this:

<a class="f2" href="#">
  See this article in the New York Times for more
</a>

In this case, the style of the link is controlled by the class “f2” and is applied to the entire phrase. However, if you introduce another text style within the link, Sitely does something a little different. It breaks the the whole phase into separate spans and applies a style to each span individually - like this:

<a href="#">
  <span class="f2">See this article in the </span>
  <span class="f4">New York</span>
  <span class="f2"> Times for more</span>
</a>

As can be seen, the “f2” class (the link style) is being applied to the first and third bits of the text phrase, and another style “f4” is being applied the the words New York - this it the italic style combined with the link style. So, now there are three spans, each one is rendered in a browser as individual links.

There isn’t much you can do to change this yourself because the code is created by Sitely itself based on what it interprets as your intention. So, you should bring it to the attention of the developers to see if they can consider a fix in the future. It may be considered a rare use-case that doesn’t warrant an immediate fix - but it would be worth asking the question.