要素の前後への要素の追加

公開日：2020-10-19 更新日：2020-10-24

1. 概要

:before と :after を使うと、JavaScript を使わずに、スタイルシートだけで、要素の前後に他の要素を追加できます。

2. サンプル１

<h1>タグの前後に【 と 】を追加しています。
追加された文字列は、コピーすることができないため、装飾としての文字列に対して使用すると良いかもしれません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .test:before { content: "【"; }
      .test:after  { content: "】"; }
    </style>
  </head>
  <body style="background-color:#000; color:#fff;">
    <h1 class="test">要素の追加</h1>
  </body>
</html>

実行結果：【 】はあとから追加されてます。


3. サンプル２

position を使って、任意の位置に、重ねて表示することもできます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .test {
        position:relative;
        padding-left:25px;
      }
      .test:before { 
        position:absolute;
        content:"";
        left:0px;
        top :12px;
        width :20px;
        height:20px;
        background-color:red;
      }
    </style>
  </head>
  <body style="background-color:#000; color:#fff;">
    <h1 class="test">要素の追加</h1>
  </body>
</html>

実行結果：先頭の■はあとから追加されてます。


Tag

New Article