liタグの中のaタグの範囲が広がらない

前提・実現したいこと

liタグの中のaタグの範囲をliタグに合わせたいです。

scssで書いています。

ご教示いただけたら幸いです。
よろしくお願い致します。

該当のソースコード

html
1<ul class="header-sp-nav">
2      <li class="header-sp-feature menu-list"><a href="#threeFeature">特徴</a></li>
3      <li class="header-sp-price menu-list"><a href="#price">価格</a></li>
4      <li class="header-sp-contact menu-list"><a href="#contact">お問い合わせ</a></li>
5    </ul>

scss
1
2/* style.scss */
3
4$sspc: 1000px;
5
6@mixin sspc {
7  @media (max-width: ($sspc)) {
8    @content;
9  }
10}
11

scss
1
2/* header.scss */
3
4@import 'style.scss';
5
6.header-sp-nav {
7
8  display: none;
9
10  @include sspc {
11
12    width: 40%;
13    height: 100vh;
14    display: flex;
15    flex-direction: column;
16    background-color: rgba(0, 0, 0, 0.16);
17    transition: 0.3s;
18    position: fixed;
19    z-index: 20;
20    top: 94px;
21    right: -40%;
22
23    .menu-list {
24
25      list-style: none;
26      width: 70%;
27      height: 10%;
28      display: flex;
29      justify-content: center;
30      align-items: center;
31      border: 1px solid#333333;
32      margin: 40px 20px 20px 50px;
33
34      background-color: rgba(256, 256, 256, 0.9);
35      position: relative;
36
37      a {
38        color: #333333;
39        text-decoration: none;
40        font-weight: bold;
41        padding-bottom: 5px;
42        border-bottom: 2px solid #1be6f5;
43        display: block;
44      }
45    }
46  }
47}

試したこと

aタグにdisplay: block;を追加しましたが変わりませんでした。

positionでも試したのですが、範囲は上手くいってもaタグについている下線との相性が合いませんでした。

hatena19

2021/03/28 06:32

SCSS ですね。タグに sass を追加して、SCSSを使っていることを質問に追記してください。また、@include の定義部分のコードも提示してください。または、コンパイルしたCSSコードを提示してください。

seakai

2021/03/28 12:24 編集

SCSSを使っていることの追記と@include の定義部分のコードも追記させていただきました。よろしくお願い致します。

hatena19

2021/03/28 12:36

@import 'style.scss'; ではstyle.scssがないこちらでは検証することができません。コンパイルしたCSSコード（出力されたCSSコード）を提示してもらえますか。

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

回答1件

ベストアンサー

とりあえず、@include sspc は無視して、コンパイルしたCSSを元に回答します。

現状のHTMLでは難しいと思います。
a要素の中身のテキストをspanタグで囲むようにして、CSSを適用するといいでしょう。

html
1<ul class="header-sp-nav">
2  <li class="header-sp-feature menu-list"><a href="#threeFeature"><span>特徴</span></a></li>
3  <li class="header-sp-price menu-list"><a href="#price"><span>価格</span></a></li>
4  <li class="header-sp-contact menu-list"><a href="#contact"><span>お問い合わせ</span></a></li>
5</ul>

css
1.header-sp-nav {
2  width: 40%;
3  height: 100vh;
4  display: flex;
5  flex-direction: column;
6  background-color: rgba(0, 0, 0, 0.16);
7  transition: 0.3s;
8  position: fixed;
9  z-index: 20;
10  top: 94px;
11}
12.header-sp-nav .menu-list {
13  list-style: none;
14  width: 70%;
15  height: 10%;
16  border: 1px solid #333333;
17  margin: 40px 20px 20px 50px;
18  background-color: rgba(255, 255, 255, 0.9);
19  position: relative;
20}
21.header-sp-nav .menu-list a {
22  color: #333333;
23  text-decoration: none;
24  font-weight: bold;
25  display: flex;
26  justify-content: center;
27  align-items: center;
28  height: 100%;
29}
30.header-sp-nav .menu-list a span {
31  padding-bottom: 5px;
32  border-bottom: 2px solid #1be6f5;  
33}