labelを表示させたい

写真の赤丸のようにlabelを表示させたいのですが表示されません。どのようにすれば表示されますでしょうか？

該当のソースコード

HTML
1<div class="wrappir">
2  	    <div class="sidebar">
3  		<div class="side-container">
4<!--ここから非表示-->
5        <label for="label1"> <i class="fas fa-bars"></i></label>
6        <input type="checkbox" id="label1" class="csc"/>
7

css
1.side-container label {
2       float: ; right: 
3       font-weight: bold;
4       cursor :pointer;
5       background-color: pink;
6       display: block;
7       font-size: 20px;
8      
9    }
10
11    .side-container  *:not(.sidelogo){
12       height: 0;
13       padding: 0;
14       overflow: hidden;
15       opacity: 0;
16       transition: 0.8s;
17    }
18
19    .side-container input{
20       display: none;
21}
22
23 input:checked + .side-container {
24    
25    opacity: 1;
26    display: block;
27　　}

m.ts10806

2020/11/26 11:58

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、どう表示させたいのでしょう。

dehi0923

2020/11/26 12:24

コード機能を利用し、再度編集しました。初心者なものでルールを知らず、大変失礼いたしました。ご指摘ありがとうございます。

m.ts10806

2020/11/26 12:29

Font Awesomeはここ以外でも使ってますか？そこが出てないだけに見えます。 CSSの問題と言うよりFont Awesomeの問題かなと HTMLをDOCTYPE宣言から全体提示いただけますか？

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

回答1件

ベストアンサー

HTMLは divの閉じタグがないのはコピーできていないだけとして、

CSSで下記が間違っているで修正してください。
2行目
float: ; right:
↓
float: right;

最終行
}
↓ 全角空白を削除
}

で、これでもラベルは表示されません。
下記のCSSで .side-container の.sidelogo以外の子孫要素をすべて非表示にしているので。

css
1    .side-container  *:not(.sidelogo){
2       height: 0;
3       padding: 0;
4       overflow: hidden;
5       opacity: 0;
6       transition: 0.8s;
7    }

これを削除すればラベルは表示されます。
（Font Awesomeへのリンクができていればですが）

追記

ラベル（ハンバーガー）をクリックしたら、
.side-container内にあるメニュー（リスト）を表示させたり、非表示にしたりしたいのだとしたら、
HTMLで label input を.side-containerの外に出せばいいでしょう。

html
1<div class="wrappir">
2    <div class="sidebar">
3        <label for="label1"> <i class="fas fa-bars"></i></label>
4        <input type="checkbox" id="label1" class="csc"/>
5        <div class="side-container">
6<!--ここから非表示-->
7
8<!--メニューリスト-->
9
10        </div>
11    </div>
12</div>

さらに追記

たぶんやりたいことは下記のようなことでしょうか。

html
1<div class="wrappir">
2  <div class="sidebar">
3    <label for="label1"> <i class="fas fa-bars"></i></label>
4    <input type="checkbox" id="label1" class="csc" />
5    <div class="side-container">
6      <ul>
7        <li><a>menu1</a></li>
8        <li><a>menu2</a></li>
9        <li><a>menu3</a></li>
10        <li><a>menu4</a></li>
11      </ul>
12    </div>
13  </div>
14</div>

css
1.sidebar label {
2  float: right;
3  font-weight: bold;
4  cursor :pointer;
5  background-color: pink;
6  display: block;
7  font-size: 20px;
8}
9
10.side-container {
11  height: 0;
12  padding: 0;
13  overflow: hidden;
14  opacity: 0;
15  transition: 0.8s;
16}
17
18#label1{
19  display: none;
20}
21
22#label1:checked ~ .side-container {
23  height: auto;
24  opacity: 1;
25  display: block;
26}