回答編集履歴

1 z-indexで調整する

Create_NAYU

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; //追加  
}  
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る