When did Chrome start underlining links differently?

HTML & CSS
1

I just noticed this now.

Firefox

Chrome

2

Please see my attached image. Although these are outdated versions of Chrome and FF, the font and underline renders almost the same in both browsers. Not as different as your demo.

Do the anchors in both of your browsers use the same font and font-size?
(Remember that the anchor settings affect the font-family, color, appearance, and behavior of the anchor text. The default browser anchor settings override your css for the parent container.)

Chrome%20vs%20FF%20underline%20%3D%20asasass

Check out your browsers. :slight_smile:

3

Yes, I see it the same way. Both FF and Chrome are current versions with me.

Thing is though, normal users don’t compare web pages with different browsers. They use their default browser, only developers use different browsers to make sure the page is usable.

You can easily fix it so they look the same.

.my-contenta a {
  text-decoration: none;
  border-bottom: 1px solid;
}

And if you want to drag the the line up like it is shown in FF you can go a step further.


p.my-contenta {
  display: table;
  margin: 20px 0 0;
  line-height: normal;
  background: #000000;
  /*width: 266px delete this and adjust padding below*/
  height: 61px;
  box-sizing: border-box;
  border: 3px solid #0059dd;
  border-radius: 25px;
  font-weight: 900;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 12px 60px 17px; /* 60px side paddings added*/
  color: #0059dd;
  text-align: center;
}
.my-contenta a {
  text-decoration: none;
}
.my-contenta a::after {
  content:"";
  display: block;
  height: 1px;
  background: #0059dd;
  margin-top: -2px;
}
1 Like
4

Hi there asasasss,

This is the default setting since Chrome 64, although supported since Chrome 57.

See the “Intent to Ship” thread in the Chrome web engine’s development forum.

These characters are effected j g p q y { } [ ]

coothead

4 Likes
5

<off topic>

Thank you very much for the post, Mr. C.   I had not heard of that property which does indeed improve readability when underlines intersect/cross descenders.
</ot>

6

Neither had I until about 6½ hours ago. :winky:

It was half an hours refined researching
that finally unearthed a definitive answer. :biggrin:

coothead

7

Thanks for pointing that out coothead. :slightly_smiling_face:

After digging around a little more I see some info on MDN about text-decoration-skip

W3’s CSS Text Decoration Module Level 4 has more details about it.

It looks like it will be useful once it gets out of experimental stage.

Chrome looks to be using text-decoration-skip-ink

Experimental. Expect behavior to change in the future.

So for those that don’t like the look of it with Latin text (if that was asasass’s case) it can be overridden with none.

.my-contenta a {
  text-decoration-skip-ink: none;
}
5 Likes
8

Is jsfiddle unaware that this code exists?
text-decoration-skip-ink: none;

How come it’s highlighted in red?

9

jsfiddle does not recognise it because it’s creators
are probably unaware of it’s existence. :biggrin:

As it is, only Chrome and Opera of the desktop
browsers appear to have implemented it…

Browser Compatibility for text-decoration-skip-ink

Why don’t you mention it to the jsfiddle people, they
might even agree to re-colour it for you. :winky:

coothead

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.