(Sample)

CSSの擬似要素 ::before と ::after を使用して、HTML要素の前後に追加のコンテンツを表示できます。HTML構造を変更することなく、視覚的なヒントや装飾を簡単に追加できます。

 <p class="new-item">新しいアイテム</p>
    <p class="new-item">もう一つの新しいアイテム</p>
    <form>
        <label for="name" class="required">名前:</label>
        <input type="text" id="name" name="name" required><br>
        <label for="email" class="required">メールアドレス:</label>
        <input type="email" id="email" name="email" required><br>
        <input type="submit" value="送信">
    </form>

<p class="new-item">新しいアイテム</p>: new-itemクラスが適用され、前に青い星が表示される段落です。

<form>: フォーム要素で、ユーザー入力を受け取ります。

  • <label for="name" class="required">名前:</label>: ラベルにrequiredクラスが適用され、後に赤い「*必須」が表示されます。
  • <label for="email" class="required">メールアドレス:</label>: ラベルにrequiredクラスが適用され、後に赤い「*必須」が表示されます。
         .new-item::before {
            content: "★ ";
            color: blue; /* 必要に応じて色を変更できます */
            font-weight: bold; /* テキストを太字にします */
        }
        .required::after {
            content: " *必須";
            color: red; /* 必要に応じて色を変更できます */
            font-weight: bold; /* テキストを太字にします */
        }

.new-item::before: class="new-item"を持つ要素の前にコンテンツを追加します。

  • content: "★ ": 各要素の前に青い星を追加します。

.required::after: class="required"を持つ要素の後にコンテンツを追加します。

  • content: " *必須": 各要素の後に赤い「*必須」を追加します。
Webアプリケーション制作のための小ネタ集　目次に戻る

マウスではなくショートカットキーで操作したい　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる