Links have an additional underline in gatsby

问题

I am not sure this is about CSS. In gatsby-starter-blog links( ) have additional underline. I mean, when you look at the source code, you will see text-decoration: none; And this works! (You can try to change it underline, line-through etc), however, there are additional lines for links and I cannot get rid of them.

回答1:

They have a box-shadow prop giving the underline (That way it's spaced a little wider and gives a nicer look instead of a tight underline):

a {
  /* This first prop */
  box-shadow: 0 1px 0 0 currentColor;
  color: #007acc;
  text-decoration: none;
}

so just cancel it out with your custom css:

a {
  box-shadow: none;
}

回答2:

It's use box-shadow property on anchor tag for bottom border. Change box-shadow: 0 1px 0 0 currentColor; to box-shadow: none; will resolve your issue. Thanks

a {
    box-shadow: none;
    color: #007acc;
    text-decoration: none;
}

来源：https://stackoverflow.com/questions/55319699/links-have-an-additional-underline-in-gatsby