CODEWITHSUNDEEP
cssunderline
krimo33
krimo33

Reputation: 15

How can I make `text-decoration: underline` looks the same across browsers?

This is the CSS code I use:

a {
text-decoration: underline dashed;
}

And you can see here that it is displayed differently on different browsers:

On Mozilla: enter image description here

On Brave: enter image description here

On Chrome:

enter image description here

How can I make the look consistent?

Upvotes: 0

Views: 903

Answers (3)

Gurjinder Kaur
Gurjinder Kaur

Reputation: 19

You can use the code below 

a
{
text-decoration-thickness: 2px;
}

Upvotes: 0

Aditya
Aditya

Reputation: 1329

Well since every browser has it's own unique way of displaying HTML and CSS you can use something like this

.dash.underline {
  text-decoration: none;
  background-image: linear-gradient(to right, #000 75%, transparent 75%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 8px 3px;
}
<p class="dash underline">See it works!</p>

You can read Why does your text decoration or any other stuff looks different from browsers to browsers here at webfx.com

You can also checkout Underline.js they are doing some pretty good job just for underlines and stuff. Underline.js GitHub

Upvotes: 0

Matthias
Matthias

Reputation: 180

There are many ways of underlining text without using text-decoration: underline. One way of doing this is with bottom borders.

First make a CSS class for all the text you want to have underlines. Something like this should do:

.dashed_underline {
border-bottom: 3px black dashed;
}

Then apply this class to your intended paragraph element:

<p class="dashed_underline">This text has a dashed underline</p>

You should find that the underline now looks the same across web browsers.

Upvotes: 1

Related Questions