Create_NAYU score 101
2020/11/10 20:07 投稿
| よく見ると、```.pc_menu_cel```は一人っ子です。 |
| メニューとして並んでいるのは```a```の方なので、下記のように最後に並んでいる```a```を選択してから、孫の線を消すことができます。 |
| ```CSS |
| a:last-child .pc_menu_cel::before{ |
| border-right:0px; |
| } |
| ``` |
| 追記 |
| 擬似要素で矩形を作り上から被せているので、テキストが消えているように見えます。テキストを矩形の上にくるようにレイヤーを調整しないといけません。 |
| 案として、```.pc_menu_cel```の擬似要素で矩形を作らず、```a```タグで作成。矩形とテキストに```z-index```で調整するのはどうでしょうか？ |
| ```css |
| .pc_menu_box a { |
| position: relative; // 追加 |
| } |
| // .pc_menu_cel::before 変更 |
| .pc_menu_box a::before { |
| z-index: 1; // 追加 |
| } |
| // .pc_menu_cel:hover::before 変更 |
| .pc_menu_box a:hover::before { } |
| // 追加（最後の線を消す） |
| .pc_menu_box a:last-child::before { |
| border: 0; |
| } |
| .pc_menu_cel { |
| z-index: 3; //追加 |
| } |
| ``` |
