border-bottomと文字の間隔を詰めたい

Question

前提・実現したいこと

https://krowl.jp/subjects/coding/sample001/のサイトの模写コーディングをしていて、フッター上の「7月の探訪」部分のborder-bottomと文字の間隔がどうしても1px程度空いてしまいます。さらに間隔を詰めるにはどうすればいいのでしょうか。以下自分が模写したコードです。

該当のソースコード

<main>
<p class="july"><a href="#"><span class="large">7</span><span class="small">月の探訪</span></a></p>
</main>

.july {
    text-align: center;
    line-height: 1;
    a {
      color: #707070;
      font-weight: bold;
      text-decoration: none;
      border-bottom: 2px #707070 solid;
      line-height: 1;
      &:hover {
        border: none;
      }
      span {
        font-size: 24px;
      }
      .large {
        font-size: 36px;
      }
    }
  }

補足

aタグのtext-decorationだと、フォントサイズの違いから下線の太さも変わってしまうので、border-bottomで下線を作っています。

Answer 1

こんばんは。

まず、フォントが違うと思います。

.july{
    font-family: '游明朝体', YuMincho, '游明朝', 'Yu Mincho', '游明朝', 'Yu Mincho', serif;

次に、フォントサイズが違うと思います。

    a {
      font-size: 10px;

Comments

[MaryJane]

フォントはbodyタグにまとめて指定していたので大丈夫だったのですが、aタグにfont-sizeを設定することで解決しました。
ありがとうございます！