Footer li last-childの擬似要素を消したい

前提・実現したいこと

表題の通り、最後のliの議事要素を消したい。

ご教授お願い致します。

発生している問題・エラーメッセージ

最後の疑似要素が消えない

試したこと

1.footer-item:last-child にdisplay:none

2 &:not(:last-child) にaタグのコードを書いても
表題のように反応しない

該当のソースコード

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Engress</title>
    <meta name="description" content="日本人へのTOEFL指導歴豊かな講師陣のコーチング型TOEFLスクール">
    <link rel="stylesheet" href="/Top/css/destyle.css">
    <link rel="stylesheet" href="/Top/css/style.css">
</head>
<body>
    <div class="body-wrapper">
   <footer class="footer">
            <div class="footer-inner">
                <div class="footer-left"> 
                   
                    <nav class="nav drawer-nav">
                        <ul class="footer-list">
                            <li class="footer-item"><a href="#">ホーム</a></li><!-- /.footer-item -->
                            <li class="footer-item"><a href="">お知らせ</a></li><!-- /.footer-item -->
                            <li class="footer-item"><a href="">ブログ</a></li><!-- /.footer-item -->
                            <li class="footer-item"><a href="">コース・料金</a></li><!-- /.footer-item -->
                        </ul><!-- /.footer-list -->
                    </nav><!-- /.nav -->
                </div><!-- /.footer-left -->

                <div class="footer-right">
                    <h1><a href="#"><img src="./img/logo (2).png" alt="Logo"></a></h1>
                    <div class="tel-column">
                        <div class="tel-row">
                            <img src="../Top/img/tel 29.svg" alt="tel">
                            <p>0123-456-7890</p>
                        </div><!-- /.tel-row -->
                        <p class="date">平日08:00〜20:00</p><!-- /.date -->
                    </div><!-- /.tel-column -->
                </div><!-- /.footer-right -->
            </div><!-- /.footer-inner -->

        </footer><!-- /.footer -->
   </div><!-- /.body-wrapper -->
</body>
</html>

CSS
1
2.footer {
3  background-color: #1B224C;
4}
5
6.footer-left {
7  display: -webkit-box;
8  display: -webkit-flex;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-pack: left;
12  -webkit-justify-content: left;
13      -ms-flex-pack: left;
14          justify-content: left;
15  -webkit-box-align: center;
16  -webkit-align-items: center;
17      -ms-flex-align: center;
18          align-items: center;
19  margin-right: auto;
20}
21
22.footer-left .nav .footer-list {
23  display: -webkit-box;
24  display: -webkit-flex;
25  display: -ms-flexbox;
26  display: flex;
27  -webkit-box-pack: left;
28  -webkit-justify-content: left;
29      -ms-flex-pack: left;
30          justify-content: left;
31  -webkit-box-align: center;
32  -webkit-align-items: center;
33      -ms-flex-align: center;
34          align-items: center;
35  margin-right: auto;
36  padding-top: 50px;
37  padding-left: 190px;
38}
39
40@media screen and (min-width: 600px) and (max-width: 1179px) {
41  .footer-left .nav .footer-list {
42    display: none;
43  }
44}
45
46.footer-left .nav .footer-list .header-item {
47  margin: 32px 28px;
48}
49
50.footer-left .nav .footer-list:last-child {
51  margin-right: 0px;
52}
53
54.footer-left .nav .footer-list:last-child:not(:after) {
55  content: "";
56  width: 1px;
57  height: 20px;
58  background-color: #fff;
59  position: absolute;
60  right: -8px;
61  margin-right: 30px;
62}
63
64.footer-left .nav .footer-list a {
65  color: #fff;
66  font-weight: bold;
67  display: inline-block;
68  position: relative;
69  padding-right: 43px;
70}
71
72.footer-left .nav .footer-list a:after {
73  content: "";
74  width: 1px;
75  height: 20px;
76  background-color: #fff;
77  position: absolute;
78  right: -8px;
79  margin-right: 30px;
80}
81
82.footer-right {
83  margin-left: auto;
84  display: -webkit-box;
85  display: -webkit-flex;
86  display: -ms-flexbox;
87  display: flex;
88  -webkit-box-orient: vertical;
89  -webkit-box-direction: normal;
90  -webkit-flex-direction: column;
91      -ms-flex-direction: column;
92          flex-direction: column;
93}
94
95.footer-right h1 {
96  width: 136px;
97  height: 27px;
98  margin-left: auto;
99  margin-right: 100px;
100  background-color: #fff;
101  border: 1px solid #707070;
102  width: 195px;
103  height: 60px;
104}
105
106.footer-right h1 img {
107  padding: 10px;
108}
109
110.footer-right .tel-column {
111  display: -webkit-box;
112  display: -webkit-flex;
113  display: -ms-flexbox;
114  display: flex;
115  -webkit-box-orient: vertical;
116  -webkit-box-direction: normal;
117  -webkit-flex-direction: column;
118      -ms-flex-direction: column;
119          flex-direction: column;
120  padding: 10px 23px 15px 23px;
121}
122
123.footer-right .tel-column .tel-row {
124  display: -webkit-box;
125  display: -webkit-flex;
126  display: -ms-flexbox;
127  display: flex;
128  -webkit-box-orient: horizontal;
129  -webkit-box-direction: normal;
130  -webkit-flex-direction: row;
131      -ms-flex-direction: row;
132          flex-direction: row;
133  padding-bottom: 15px;
134  margin-left: auto;
135  margin-right: 50px;
136}
137
138.footer-right .tel-column .tel-row img {
139  width: 20%;
140  padding-right: 5px;
141}
142
143.footer-right .tel-column .tel-row p {
144  font-size: 1.6rem;
145  font-weight: bold;
146  white-space: nowrap;
147  color: #fff;
148}
149
150.footer-right .tel-column .date {
151  display: block;
152  padding: 27px 0px 10px 0px;
153  margin-left: auto;
154  margin-right: 50px;
155  color: #fff;
156}

追記

CSS

CSS
1.header-item {
2  margin: 32px 28px;
3}
4
5&:last-child {
6  margin-right: 0px;
7}
8
9a {
10  color: #fff;
11  font-weight: bold;
12  display: inline-block;
13  position: relative;
14  padding-right: 43px;
15}
16a:not(:last-child) a:after {
17  content: "";
18  width: 1px;
19  height: 20px;
20  background-color: #fff;
21  position: absolute;
22  top: -8px;
23  right: -8px;
24  margin-right: 30px;
25}

追記

CSS
1.footer-left {
2  display: -webkit-box;
3  display: -webkit-flex;
4  display: -ms-flexbox;
5  display: flex;
6  -webkit-box-pack: left;
7  -webkit-justify-content: left;
8      -ms-flex-pack: left;
9          justify-content: left;
10  -webkit-box-align: center;
11  -webkit-align-items: center;
12      -ms-flex-align: center;
13          align-items: center;
14  margin-right: auto;
15}
16
17.footer-left .nav .footer-list {
18  display: -webkit-box;
19  display: -webkit-flex;
20  display: -ms-flexbox;
21  display: flex;
22  -webkit-box-pack: left;
23  -webkit-justify-content: left;
24      -ms-flex-pack: left;
25          justify-content: left;
26  -webkit-box-align: center;
27  -webkit-align-items: center;
28      -ms-flex-align: center;
29          align-items: center;
30  margin-right: auto;
31}
32
33@media screen and (max-width: 700px) {
34  .footer-left .nav .footer-list {
35    display: -webkit-box;
36    display: -webkit-flex;
37    display: -ms-flexbox;
38    display: flex;
39    -webkit-box-orient: vertical;
40    -webkit-box-direction: normal;
41    -webkit-flex-direction: column;
42        -ms-flex-direction: column;
43            flex-direction: column;
44    padding-left: 50px;
45    display: block;
46    text-align: left;
47  }
48}
49
50.footer-left .nav .footer-list .footer-item {
51  margin: 32px 28px;
52}
53
54.footer-left .nav .footer-list:last-child {
55  margin-right: 0px;
56}
57
58.footer-left .nav .footer-list a {
59  color: #fff;
60  font-weight: bold;
61  display: inline-block;
62  position: relative;
63  padding-right: 43px;
64}
65
66.footer-left .nav .footer-list a:not(:last-child) {
67  content: "";
68  width: 1px;
69  height: 20px;
70  background-color: #fff;
71  position: absolute;
72  top: -8px;
73  right: -8px;
74  margin-right: 30px;
75}
76
77@media screen and (max-width: 700px) {
78  .footer-left .nav .footer-list a {
79    display: none;
80  }
81}

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

回答1件

ベストアンサー

最後のli要素内のa要素の疑似要素を非表示ということなので、

下記を追加するか、

css
1.footer-left .nav .footer-list li:last-child a:after {
2  display: none;
3}

下記のように修正するかですね。

css
1/* .footer-left .nav .footer-list a:after { */
2.footer-left .nav .footer-list li:not(:last-child) a:after {
3  content: "";
4  width: 1px;
5  height: 20px;
6  background-color: #fff;
7  position: absolute;
8  right: -8px;
9  margin-right: 30px;
10}

投稿2021/11/19 01:51

編集2021/11/19 01:58

hatena19

総合スコア33715

free_teku

2021/11/19 23:02

ご回答ありがとうございます。うまくいかなかったため、もう一度ご確認お願い致します。上記に追加のCSSを書きましたのでよろしくお願いします

hatena19

2021/11/20 03:11

SCSSの一部分を抜き出されても、コンパイルできないので確認できませんので、当てずっぽうですが、追記のSCSSの a:not(:last-child) a:after { は間違いですよね。a の中に a はないので。 li:not(:last-child) a:after { となるはずです。 li要素のうち、最後の要素は除いて、その子のa要素の疑似要素という意味にしないと。 CSSのセレクタの意味をよく考えてください。

free_teku

2021/11/25 07:10

遅くなりました。しこ錯誤した結果、不明な点にたどり着いたため、改めて、教えていただけると幸いです。私は、疑似要素を使って、縦線を書こうとしています。これだと、::afterが抜けているため、非表示だと感じ、追記しましたがうまくいきませんでした。上記に、コードを追記したので、ご教授お願い致します。

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