<a class='original' href='/'>This is original hover</a>
<a class='text-shadow' href='/'>This is text shadow fix(not consistant in Browsers)</a>
<a class='text-stroke' href='/'>This is text stroke fix (doens't support in IE)</a>

<h3>Not a fix, reserve a space for bold. It may work for multiple links (buttons) in the same line</h3>
<a class='pseudo-after' title='This is ::after fix' href='/'>This is ::after fix</a>
<a class='pseudo-after' title='This is ::after fix' href='/'>This is ::after fix</a>

<h3>Firefox hover fix in text shadow</h3>
<a class='cross-browser-text-shadow'>This is only a hot fix</a>
<h3> IE hover fix in text stroke</h3>
<a class='cross-browser-text-stroke'>This is the best solution I found</a>

@mixin m-hover-firefox {
    @media (-moz-touch-enabled: 0)
    {
        @content;
    }
}
@mixin m-hover-ie {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     @content;
  }
}
h3{
  margin-bottom: 0;
}
a{
  display: block;
  color: black;
  &:hover{
    color: black;
  }
  &.original{
    &:hover{
      font-weight: bold;
    }
  }
  &.text-shadow{
    &:hover{
     text-shadow: 0 0 1px black;
     //text-shadow: 0 0 1px black, 0 0 1px black;
    }
  }
  &.text-stroke{
    &:hover{
      text-stroke: 1px black;
      -webkit-text-stroke: 1px black;
    }
  }
  &.pseudo-after{
    display: inline-block;
    &:hover{
      font-weight: bold;
    }
    &:after{
      content: attr(title);
      display:block;
      font-weight: bold;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
  }
  &.cross-browser-text-shadow{
    &:hover{
      text-shadow: 0 0 1px;
      @include m-hover-firefox{
        text-shadow: 0 0 .2px;
      }
    }
  }
  &.cross-browser-text-stroke{
    &:hover{
        text-stroke: 1px black;
        -webkit-text-stroke: 1px black;
    }
     @include m-hover-ie{
       &:hover{
        text-shadow: 0 0 1px black; 
       }
    }
  }
}