.link {
  color: #0046e8;
}
.link::after {
  content: "\f08e";
  font-family: FontAwesome;
  margin-right: 0.2rem;
}
.link:hover {
  text-decoration: underline;
}

テキストリンクのhover時にFontAwesomeに下線をつけないようにする方法

.link::after {
  content: "\f08e";
  display: inline-block; //<—追記
  font-family: FontAwesome;
  margin-right: 0.2rem;
}

このように 「display: inline-block;」 を追記することでFontAwesomeの下に線が出なくなりました。

-wevkit-scrollbar でカスタマイズできる

-webkit-scrollbar-webkit-scrollbar というCSSプロパティを指定することで、スクロールバーのデザインをカスタマイズできます。
実際に使うプロパティは

• -webkit-scrollbar
• -webkit-scrollbar-track
• -webkit-scrollbar-thumb

の3つだけです。

カスタマイズ例

縦にスクロールするスクロールバーをカスタマイズした例です。

  /*スクロールバー全体*/
  ::-webkit-scrollbar {
    height: 0;
    width: 7px;
    padding-right: 3px;
  }

  /*スクロールバーの軌道*/
  ::-webkit-scrollbar-track {
    border-radius: 7px;
    box-shadow: inset 0 0 6px ccc;
  }

  /*スクロールバーの動く部分*/
  ::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 10px;
  }

これだけです。簡単ですね。
横のスクロールバーをつけたい場合、 height:0; を height:7px; とか適当な高さに変更することで表示できます。

しかし、残念ながら Edge や IE11 は対象外です。