Displaying the phone number in the layout of the mail.ru letter

Question:

The layout of the letter contains a phone number. When displayed on mail.ru, the phone number is wrapped in a <span> and its styles are applied in it. how to overcome it? A link with a phone number should remain a link, but not apply styles from mail.ru

The code is written in the template like this:

a {
  display: inline-block;
  font-family: 'arial';
  color: #abafac !important;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: .7px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid #abafac;
  margin-top: 5px;
  margin-right: -6px;
}
<a href="tel:88008888888">8 800 888 88 88</a>

and in mail.ru it is displayed like this:

a {
  display: inline-block;
  font-family: 'arial';
  color: #abafac !important;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: .7px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid #abafac;
  margin-top: 5px;
  margin-right: -6px;
}
<a target="_blank"><span class="js-phone-number highlight-phone" data-title="Позвонить через Веб-Агент">8 800 888 88 88</span></a>

Answer:

It turns out that mail.ru modifies your link, subsequently processing it with JavaScript. This is for protection purposes. There is nothing you can do about it, but you can change the styles by adding your own with the value! Important;

For instance:

.js-phone-number {
    font-size: 100px !important;
}

This is provided that your CSS mail.ru is not overwritten.

Scroll to Top