BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Content Insertion Pseudo Class Selector (::)

Return to CSS Tags Index

    Content Insertion (::)

  • Style specific parts of an element
  • Examples:
    • Content before/after
    • First letter
    • First line
  • It's a "granular"styling control
  • No extra HTML needed

    Sample types of Insertions

  • ::before :
    • Insert content before actual content
    • Often with content' property
  • ::after :
    • Insert content after actual content
    • also with content' property
  • ::first-letter :
    • Style the first letter of a text block
  • ::first-line :
    • Style the first line of a text block
  • ::selection :
    • Style selected parts of the users text"

    When to Use

  • ::before & ::after - Decorative changes - no HTML changes
  • ::first-letter - Drop caps, special start styling
  • ::first-line - Style opening line in paragraph or heading
  • ::selection - Customize selected text appearance

Fluffy Pancakes

A stack of fluffy pancakes
Prep time: 15 mins | Cook time: 20 mins

    Ingredients:

  • Flour
  • Sugar
  • Eggs
  • Milk

    • Instructions:

    1. Start by mixing all the dry ingredients in a bowl.

    2. Whisk in the eggs and milk until you have a smooth batter.

    3. Cook each side on medium heat until golden brown.

    Tip: Serve with fresh berries and maple syrup for added deliciousness!

    Back to Top