疑似要素【before】

2018/12/23 2022/5/3 初心者

今回は疑似要素【before】を紹介したいと思います。

<デモ>

<html>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <main>
      <div class="backgroundBox">
        <div class="Container">
          <nav>
            <ul class="menulist">
              <li class="menuChild">
                <a class="menuChildItem" href="#">menu1</a>
              </li>
              <li class="menuChild">
                <a class="menuChildItem" href="#">menu2</a>
              </li>
              <li class="menuChild">
                <a class="menuChildItem" href="#">menu3</a>
              </li>
              <li class="menuChild">
                <a class="menuChildItem" href="#">menu4</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </main>
  </body>
</html>

<ポイント>

・前回のtoggleclassに関する記事とhtmlはほぼ同じです。

<css>

* {
  margin: 0;
  padding: 0; }

.backgroundBox {
  background-color: whitesmoke; }

.Container {
  margin: 0 10px 20px;
  padding-top: 10px;
  padding-bottom: 10px; }

.menuChild {
  background-color: #5526e6d1;
  width: 200px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #cbcbccd1;
  transition: 0.8s;
  position: relative; }

.menuChildItem {
  display: block;
  text-decoration: none;
  color: white; }

.menuChild:hover {
  transition: 0.5s;
  opacity: 0.5; }

.menuChildItem::before {
  content: url(../img/arrow.png);
  position: absolute;
  left: 15px;
  top: 2px; }

<ポイント>

・　.menuChildItem::before{}

①menuChildItemのaタグに足して疑似要素beforeを追加する。aタグの直前に要素を入れることができる。(直後に要素えを追加したい場合はafterを使用する)content:url(○○);　○○は追加したい内容。今回は画像を追加したいと考えていたので、追加したい画像のパスを記述している。

※文字を追加したい場合はcontent: “○○”;で追加できる

②疑似要素の表示位置をabsoluteを使用し決めている。微調整して、好きな位置に表示するこが可能。absoluteの使い方が分からない場合は要素の配置【position:abolute;】を参考にしてみて下さい。

※absoluteによる位置制御のために、親要素である.menuChildにposition:relative;を記述しています。

<補足>

・　.menuChildItem:hover{}

hoverにより、カーソルが.menuChildItem上にあるときに適用されるcssを記述することができます。

疑似要素はよく使用するので、使い方を覚えておいて損はないでしょう。

以上。

php書けるようにならねば・・・・