CSS - Pseudo Elements

::before and ::after

The ::before and ::after pseudo-elements let you add content before or after an element without changing the HTML. They are often used to add icons, decorations, or extra text to improve the look of an element.

a::before {
  content: "\f0c1"; /* Unicode character for a link icon */
  font-family: FontAwesome;
  margin-right: 5px;
}

In this example, the ::before pseudo-element adds a link icon before each <a> element. The content property sets the content to add, which can be text, an image, or even an empty string. The font-family property sets the icon font (e.g., FontAwesome), and you can add more styling as needed.

h2::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  margin-left: 10px;
}

Here, the ::after pseudo-element creates a decoration (a red square) after each <h2> element. The content property is an empty string since we don't want to add any text. The display, width, height, and background-color properties style the decorative element.

::first-letter and ::first-line

The ::first-letter and ::first-line pseudo-elements let you style the first letter or the first line of a text block differently from the rest of the text.

p::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

In this example, the ::first-letter pseudo-element creates a drop cap effect for the first letter of each <p> element. The font-size property increases the size of the first letter, font-weight makes it bold, float puts it on the left, and margin-right adds space between the drop cap and the rest of the text.

p::first-line {
  font-variant: small-caps;
  color: #666;
}

Here, the ::first-line pseudo-element styles the first line of each <p> element. The font-variant property sets the text to small capitals, and the color property changes the text color of the first line.

Note that the ::first-letter and ::first-line pseudo-elements can only be used on block-level elements, and they have limits on the properties that can be used with them.

::selection

The ::selection pseudo-element lets you style the text that the user selects. You can change the background color and text color of the selected text.

::selection {
  background-color: #ff0000;
  color: #fff;
}

In this example, the ::selection pseudo-element changes the background color of the selected text to red and the text color to white. When the user selects any text on the page, it will show with the set colors.

However, note that the ::selection pseudo-element has limited browser support, and some browsers may not use the set styles. So, it's good to provide backup styles or use other methods for a consistent look across browsers.

::placeholder

The ::placeholder pseudo-element targets the placeholder text inside form input fields. It lets you style the placeholder text differently from the actual input text.

input::placeholder {
  color: #999;
  font-style: italic;
}

You can use various CSS properties to change the look of the placeholder text:

Note that ::placeholder has some differences in browser support. To handle cross-browser compatibility, you can use vendor prefixes:

::-webkit-input-placeholder {
  /* Chrome, Safari, Opera */
  color: #999;
}

:-ms-input-placeholder {
  /* Internet Explorer */
  color: #999;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
}

::marker

The ::marker pseudo-element lets you style the marker box of a list item, such as the bullet in an unordered list or the number in an ordered list.

ul li::marker {
  color: #ff0000;
  font-size: 1.2em;
}

ol li::marker {
  font-weight: bold;
  content: counter(list-item) ") ";
}

• For the unordered list, the color property changes the color of the bullet to red, and the font-size property increases the size of the bullet.
• For the ordered list, the font-weight property makes the number bold, and the content property modifies the marker content. The counter(list-item) function generates the current list item number, and the ) " part adds a closing parenthesis and a space after the number.

Browser support for the ::marker pseudo-element is relatively new. As an alternative, you can use the list-style-type property to change the marker style or create custom markers using pseudo-elements like ::before.

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

li::before {
  content: "\2022"; /* Bullet character */
  color: #ff0000;
  margin-right: 5px;
}

These are just a few examples of how advanced pseudo-elements like ::placeholder and ::marker can be used to style specific parts of an element. By using these pseudo-elements and thinking about browser support, you can create more appealing and custom user interfaces.