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

前提・実現したいこと

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

該当のソースコード

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

SCSS
1.july {
2    text-align: center;
3    line-height: 1;
4    a {
5      color: #707070;
6      font-weight: bold;
7      text-decoration: none;
8      border-bottom: 2px #707070 solid;
9      line-height: 1;
10      &:hover {
11        border: none;
12      }
13      span {
14        font-size: 24px;
15      }
16      .large {
17        font-size: 36px;
18      }
19    }
20  }

補足

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

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

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

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

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

CSS
1    a {
2      font-size: 10px;

投稿2020/12/19 15:00

Lhankor_Mhy

総合スコア36158

MaryJane

2020/12/19 16:17

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

該当のソースコード

補足

関連した質問