CSSで作ったバーガーメニューのアイコン下のテキストを変化させたい

前提・実現したいこと

CSSで作成したハンバーガーメニューの三本線の下にテキストで「MENU」、
クリックするとメニューが開き、テキストは「CLOSE」に変化させたい。

該当のソースコード

HTML
1<!-- ドロワーメニュー -->
2<div class="drawer">
3	<input class="drawer_checkbox" id=“drawerCheckbox” type="checkbox">
4
5	<!-- ドロワーアイコン部分 -->
6	<label class="drawer_icon" for=“drawerCheckbox”>
7		<span class="drawer_icon_item navToggle">
8			<span class="menu_span">MENU</span>
9		</span>
10		
11	</label>
12	
13
14	<!-- 背景を暗く -->
15	<label class="drawer_overlay" for=“drawerCheckbox”></label>
16
17	
18	<nav class="drawer_menu" id="globalMenuSp">
19		<ul id="menu">
20			<a href="" class="menu_sp_logo"><img src="images/menu_sp_logo.png" alt=""></a>
21			<li><a href=""></a></li>
22			<li><a href="">お知らせ</a></li>
23			<li><a href="">お知らせ</a></li>
24			<li><a href="">お知らせ</a></li>
25			<li><a href="">お知らせ</a></li>
26			<li><a href="">プライバシーポリシー</a></li>
27			
28		</ul>
29	</nav>
30</div>
31

css
1menu_sp_logo {
2  width: 90px;
3  height: auto;
4}
5
6
7
8.drawer_icon {
9  display: block;
10  width: 60px;
11  height: 60px;
12  position: fixed;
13  top: 10px;
14  right: 2%;
15  cursor: pointer;
16  z-index: 400;
17}
18
19
20.drawer_icon_item, .drawer_icon_item::before, .drawer_icon_item::after {
21  background-color: #306294;
22  display: block;
23  width: 26px;
24  height: 2px;
25  position: absolute;
26  top: 0;
27  right: 0;
28  left: 0;
29  bottom: 0;
30  margin: auto;
31}
32
33
34.drawer_icon_item::before {
35  content: '';
36  top: 16px; 
37  left: -10px;
38     
39}
40
41.drawer_icon_item::after {
42  content: '';
43  top: -16px;
44  left: 6px; 
45  
46}
47
48.menu_span {
49  font-size: 10px;
50  position: relative;
51  top: 4px;
52  left: -3px;
53}
54
55
56
57.menu_span:checked {
58  content:"CLOSE";
59  transform: translateY(0) rotate(-45deg);
60  top:5px;
61  left:4px;
62}
63
64
65
66.drawer_overlay {
67  background: #333;
68  opacity: 0;
69  pointer-events: none;
70  width: 100%;
71  height: 100%;
72  position: fixed;
73  top: 0;
74  right: 0;
75  z-index: 2;
76}
77
78.drawer_checkbox:checked ~ .drawer_overlay {
79  opacity: 0.3;
80  pointer-events: auto;
81}
82
83
84
85.drawer_menu {
86  background: #fff;
87  opacity: 0.9;
88  color: #306294;
89  max-width: 100%;
90  width: 500px;
91  height: 100vh;
92  position: fixed;
93  top: 0;
94  right: -500px;
95  z-index: 80;
96}
97
98.drawer_checkbox:checked ~ .drawer_menu {
99  right: 0;
100}
101
102.drawer_checkbox:checked ~ .drawer_icon .drawer_icon_item {
103  background: transparent;
104}
105
106.drawer_checkbox:checked ~ .drawer_icon .drawer_icon_item::before {
107  -webkit-transform: rotate(-45deg);
108  transform: rotate(-45deg);
109  top: 0;
110  left: 1px;
111}
112
113.drawer_checkbox:checked ~ .drawer_icon .drawer_icon_item::after {
114  -webkit-transform: rotate(45deg);
115  -moz-transform: rotate(45deg);
116  transform: rotate(45deg);
117  top: 0;
118  left: 1px;
119}
120
121.drawer_icon_item,
122.drawer_icon_item:after,
123.drawer_icon_item:before,
124.drawer_overlay,
125.drawer_menu {
126  -webkit-transition: all 0.7s;
127  -moz-transition: all 0.7s;
128  transition: all 0.7s;
129}
130
131.drawer_menu {
132  text-align: center;
133}
134
135.drawer_menu ul {
136  width: 500px;
137  text-align: left;
138  margin: 50px auto 0;
139}
140
141.drawer_menu ul li {
142  font-size: 18px;
143  padding-bottom: 36px;
144}
145
146.drawer_menu ul li a {
147  text-decoration: none;
148  color: #333;
149  display: flex;
150  flex-direction: column;
151}
152
153
154.drawer_menu span {
155  font-size: 16px;
156}
157

試したこと

toggleClassをつけclassの付与？を使えばjQueryなどでできそうなのですが、可能であればCSSのみで実装をしたく、
ネット上で探して見たのですが、そのような情報が見当たらないため質問させてください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

方法としては、MENU と CLOSE の要素を配置しておいて、それぞれを表示/非表示を切り替えればいいでしょう。
あるいは、疑似要素のcontentで MENU と CLOSE を切り替えればいいでしょう。

html
1        <span class="drawer_icon_item navToggle">
2            <span class="menu_span">MENU</span>
3            <span class="close_span">CLOSE</span>
4        </span>

css
1.drawer_checkbox:checked ~ .drawer_icon .menu_span {
2  display: none;
3}
4
5.drawer_checkbox ~ .drawer_icon .close_span {
6  display: none;
7  top: 10px;
8}
9.drawer_checkbox:checked ~ .drawer_icon .close_span {
10  display: block;
11}

CodePenサンプル

疑似要素案

html
1        <span class="drawer_icon_item navToggle">
2            <span class="menu_span"></span>
3        </span>

css
1.drawer_checkbox ~ .drawer_icon .menu_span::before {
2  content:"MENU";
3}
4
5.drawer_checkbox:checked ~ .drawer_icon .menu_span::before {
6  content:"CLOSE";
7}