こんにちは、
今回はcssでborderプロパティを透過させたいけど文字は透過させたくない！
と思って手探りでたどり着いた方法をお話しします。
親要素である<li>にopacityを設定すると、
その子要素である<a>も同じ透過率になってしまうのですが、
どうにかしてborderと文字を別の透過率にしたい・・・！
と思いいろいろ探してみましたが、どうも方法はないみたいです。
background-color: rgba();っていうやつを使えば背景のみを透過させることは可能なのですが、背景以外には使えません。
じゃあ諦めるしかないのか。
というとそうではありません。
borderプロパティのみを指定できないなら、親要素の中にborderプロパティだけの為に別の要素を追加してしまえばよいのです。
↓↓↓こんな感じです↓↓↓
See the Pen submenu with line on the left by shefuyuta (@shefuyuta) on CodePen.
ブログを作成すると言う想定でBlogタブを作り、
そこにカーソルを合わせるとサブメニューが出てくるようにしました。
サブメニュー自体の紹介も↓↓↓でしています。
サブメニューでは、
今回のテーマである透過率が文字と異なるライン(border)を左側に置き、
カーソルを合わせた項目の文字とラインが一緒に透過率ゼロになる、というものです。
<ul class="submenu">要素の中に<li>を普通に並べるのですが、
最初の<li>の前にborderline用の要素<div class="sideline">を置き、
それから<li>を並べていきます。
そしてsidelineクラスのborderを好きなように設定し、
heightはサブメニュー全体の高さに揃えます。
必ずpositionはabsoluteにし、z-indexはsidelineより<li>の方を高く設定してください。
もちろんアンダーラインでもいいですし、文字の両側に同時にラインを置くということもできます。
ちなみにもちろんラインと文字の透過率を揃える場合は
こんな面倒なことする必要はありません。
その場合は<li>内でborderとopacityを設定し、
li:hoverでopacityを1にすれば良いです。
ご参考頂ければ幸いです。