[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!!

「:before」で「pタグ」の前に文字を挿入

では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。

ではCSSを見てみます。

p:before {
      content: "オレ的には" ;
}

こんな感じですね。

たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。

で、その中で「content:"ここに自由に文章を入れる";
」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく!

サンプル1

「:after」で「pタグ」の後ろに文字を挿入

では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。

p:after {
      content:"……と言ってみる";
}

サンプル2

「……と言ってみる」と挿入しましたが、ウザいですねー。自信持って言えよ（笑）。

サンプルページで確認してほしいこと!

1つだけ、サンプルページでやって欲しいことがあります。それは文字をドラッグすること。ドラッグするとこちらの画像のようになるんですねー。

そうです。選択されないんです。あくまで擬似で強引に入れているものだからか、普通のテキストとは違って文字として認識されません。なのでGoogleからも認識されないので重要なキーワードをここに入れてもSEO的には意味ないですよー。

CSS

p:before {
      content:"オレ的には";
      color:red;
      font-size:200%;
}
p:after {
      content:"……と言ってみる";
      text-decoration: line-through ;
      border: 1px solid blue ;
      margin-left: 3em ;
      padding: 0.1em 0.3em ;
      background: yellow ;

}

サンプル3

簡単ですね。先ほどの擬似要素の下にCSSコードを追加するだけです。このサンプルを見ると結構いろんなことができるのがわかりますねー。ほら、楽しくなってきたでしょ?

HTML

<h3 id="no-01">ドラクエへの愛情について</h3>

CSS

#no-01 {
      content:【1】;
}

HTML

<p>この画像は「before」で入れているのでドラッグできません。</p>

CSS


p:before {
      content : url(https://yossense.com/images/article/2014-drawing-03.png) ;
      display: block;
}

HTML

私は<span class="icon_chrome">Google Chrome</span>が大好きです。

ちなみにこのコードは単語登録で登録しています。セミコロンを使った登録がオススメですよー♪

CSS

.icon_chrome:before {
      content: url(https://yossense.com/images/article/icon_chrome.gif) ;
      position : relative ;

      bottom : -0.16em ;
      margin-right : 0.1em ;
}

HTML


<ol class="process">
    <li>材料を仕入れる</li>
    <li>商品を作成する</li>
    <li>配送する</li>
</ol>

ほら、やっぱりフローチャートってその構造上<ol>タグを使いたいじゃないですか? 間違っても<br />と「↓」の組み合わせなんてゴメンです。

CSS



.process {
      width : 80% ;
      text-align : center ;
}
.process li {
      list-style : none ;
}
.process li:after {
      content : url(https://yossense.com/images/base/arrow-down-01.png) ;
      display : block ;
      text-align : center ;
}
.process li:last-child:after {
      content : none ;
}