"text-underline-position: under" in Android Chrome doesn't work

Here’s a sample page:

    body {
      margin: 0;
      padding: 0;

    header {
      padding: 16px 0;
      text-align: center;
      background: black;

    header img {
      width: 234px;
      height: 222px;
      vertical-align: bottom;

    li {
      background: url('images/WhatsApp.png') no-repeat right;
      padding: 30px 50px;
      list-style: none;

    a {
      font: bold 32px Calibri;
      color: black;
      text-underline-position: under;


<html dir="rtl" lang="fa">
    <img src="logo.png" alt="Logo">
      <li><a href="https://chat.whatsapp.com/LyXl3gwellfIiB2V9JJXRy" title="گروه اطّلاع‌رسانی">گروه اطّلاع‌رسانی</a></li>
      <li><a href="https://wa.me/message/ZDX7YVUP6NBCJ1" title="ارسال تکالیف">ارسال تکالیف</a></li>

It doesn’t look good on Android Chrome, i.e. the underline is cut off and crosses some descenders.

Here’s the final result, which I tested on the latest version of Chrome, 93:

Have you looked at text-underline-offset? Maybe that will help.

Looks like it should work in v.93 of Chrome for Android:



1 Like

Yes, it seems to be a bug.

1 Like