:before content:” “;

1か月前より成長していたんだって、
実はすごくすごく嬉しい。小さい事だけど。
って経験、皆さんはありますか?

昨日、ハンバーガーメニュー(ドロワーメニュー)の体裁を整えていました。
下のようなリスト。ヘッダーナビ。
3番目のリストの中に下層ページのリストがあります。
メニュー自体は親メニュー3つ、下層ページメニュー2つ、
合わせて5つと少ないので、ドロワーメニュー内では全部を表示したい。
でも、下層ページは下層ページだよって知らせたい。

<div class=header_nav>
  <ul>
    <li>
      <p>000</p>
    </li>
    <li>
      <p>000</p>
    </li>
    <li>
      <p>000</p>
      <ul class=header_nav_sub>
        <li>
          <p>3333</p>
        </li>
        <li>
          <p>3333</p>
        </li>
      </ul>
    </li>
  </ul>
</div>

インデントや余白を padding などで調整してもいまいちわかりづらい。

ふと、content : ” ” ; を思い出しました。

” ” は空白の意味だけど、ハイフン「-」を使ったら一目でわかるんでない?
(ちなみに、エクセルのif 関数でも空白は「 ” ”」 を使いますね^^)

んで、文字の後に付ける記号とかには : after とか使う場合もあるし、
今回もしかしたら : before 使えないかな?と思ったので、CSSに

.header_nav_sub li:before{
  content:"-";
}

と付け足し、リロードすると、ビンゴ!
下層ページの前にしっかり「-」がついてる!!!
だけど、やっぱ少し余白は欲しいですよね。
私の覚えている余白って padding や margin なので
(半角スペースの意味の「 &nbsp 」などもありますが)

まずは padding – right を入れて、だめなら &nbsp とかも試そうと
padding を入れました

.header_nav_sub li:before{
  content:"-";
  padding-right:5px;
}

そしてリロード。

できた~♪ハイフンと文字の隙間もいい感じ♪

てか、先月はオロオロしてググるのもキーワードを探し探ししていたのに今の流れはなんだ~!?

亀のようでも成長してるんじゃない?

て嬉しかった出来事でした。
もちろん、まだまだ理解が進んでないところ、勘違いしているところ、たくさんあります。
でも、何するにもググらないと進めなかったりキーワードがちょっと違うとかで答えに辿り着けなかったりした過去の私と比べたら今回はグッジョブよね♪

大丈夫。一歩一歩確実に進めてるよ。私。と思った出来事でした。

コメントを残す