teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

z-indexで調整する

2020/11/10 11:07

投稿

Create_NAYU
Create_NAYU

スコア105

answer CHANGED
@@ -6,4 +6,32 @@
6
6
  a:last-child .pc_menu_cel::before{
7
7
  border-right:0px;
8
8
  }
9
+ ```
10
+
11
+ 追記
12
+ 擬似要素で矩形を作り上から被せているので、テキストが消えているように見えます。テキストを矩形の上にくるようにレイヤーを調整しないといけません。
13
+
14
+ 案として、```.pc_menu_cel```の擬似要素で矩形を作らず、```a```タグで作成。矩形とテキストに```z-index```で調整するのはどうでしょうか?
15
+
16
+ ```css
17
+ .pc_menu_box a {
18
+ position: relative; // 追加
19
+ }
20
+
21
+ // .pc_menu_cel::before 変更
22
+ .pc_menu_box a::before {
23
+ z-index: 1; // 追加
24
+ }
25
+
26
+ // .pc_menu_cel:hover::before 変更
27
+ .pc_menu_box a:hover::before { }
28
+
29
+ // 追加(最後の線を消す)
30
+ .pc_menu_box a:last-child::before {
31
+ border: 0;
32
+ }
33
+
34
+ .pc_menu_cel {
35
+ z-index: 3; //追加
36
+ }
9
37
  ```