Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content

Adding Flair with Pseudo-Elements: :first-letter, :first-line, and :after Examples

While standard CSS properties offer excellent control over your website’s appearance, pseudo-elements unlock advanced styling possibilities. Let’s explore the power of :first-letter, :first-line, and :after with practical examples:

1. :first-letter:

• Applies styles to the first letter of the first line of a block-level element (headings, paragraphs, etc.).
• Example:

CSS

h1:first-letter {

  font-size: 2em;

  color: #ff0000;

  font-weight: bold;

  text-decoration: underline;

}

This will make the first letter of the first line in all <h1> elements larger, red, bold, and underlined.

2. :first-line:

• Applies styles to the entire first line of a block-level element.
• Example:

CSS

p:first-line {

  font-style: italic;

  color: #333;

}

This will make the first line of all <p> elements italic and slightly darker.

3. :after:

• Inserts content after the content of an element.
• Example:

CSS

.button:after {

  content: ” »”; /* Insert right angle symbol */

  font-size: 0.8em;

  margin-left: 5px;

}

This will add a small right angle symbol after all elements with the class “.button”.

Beyond the Basics

• Combine pseudo-elements with other properties for creative effects.
• Use :before to insert content before the element’s content.
• Experiment with content property values to add text, symbols, or even generated content.

Remember

• Use pseudo-elements sparingly to avoid clutter and maintain accessibility.
• Ensure sufficient contrast between added content and background for readability.
• Test your styles across different browsers for consistent rendering.

By mastering these pseudo-elements, you can inject personality and unique touches into your web pages, enhancing their visual appeal and user experience. Happy styling!

Go back to tutorial