::before・::after

2023 12/29

2023.12.29 2023.12.29

記事の内容

::before

要素に前部分にコンテンツを挿入する事ができます。

::beforeプロパティ

記法

.クラス名::before　{
　content : “テキスト・記号・画像”;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>::beforeプロパティ</title>
  </head>

  <body>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
  </body>
</html>

li::before {
  content: "★";
  color: red;
}

出力結果

リスト1
リスト2
リスト3

::after

要素に末尾にコンテンツを挿入する事ができます。

::beforeプロパティ

記法

.クラス名::after　{
　content : “テキスト・記号・画像”;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>::afterプロパティ</title>
  </head>

  <body>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
  </body>
</html>

li::after {
  content: "★";
  color: red;
}

出力結果

リスト1
リスト2
リスト3