Habiba's Little Corner

A Complete Guide to Pseudo-Elements ✨

A Complete Guide to Pseudo-Elements ✨

Habiba Wael's photo
Habiba Wael
·

4 min read

Table of contents

What are pseudo-elements?

A CSS pseudo-element is a keyword added to a selector used to style a specific part of the selected element(s). For example, ::first-letter can be used to change the font and colour of the first letter of a paragraph.

/* The first line of every <p> element. */
   p::first-letter {
        color: #fda4af;
        font-weight: 800;
        text-transform: uppercase;
        background-color: #164e63;
      }

Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax

You can use only one pseudo-element in a selector.

selector::pseudo-element {
property: value;
}

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

Types

::after

Insert something after the content of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

<div>
  <p>This is the first</p>
  <p>Here is the second</p>
</div>
<style>
  p::after {
    content: " paragraph.";
    color: #fda4af;
  }
</style>

::before

Insert something before the content of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

<p>
  you can follow me on Twitter
  <a href="https://twitter.com/habibawael02">@habibawael02</a> or here at
  <a href="https://hashnode.com/@HabibaWael">Habiba Wael</a>
</p>

<style>
  a {
    color: #e5e7eb;
    text-decoration: none;
  }

  a::before {
    content: "🔗";
  }
</style>

::first-letter

Applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

    <p>
      Ullamco mollit sit laborum veniam. Sunt exercitation duis ut velit mollit
      deserunt. Sint dolore esse in fugiat aliqua. Ullamco mollit sit laborum
      veniam.
    </p>
<style>
  p::first-letter {
        color: #fda4af;
        font-weight: 800;
        text-transform: uppercase;
        background-color: #164e63;
      }
</style>

::first-line

Applies styles to the first line of a block-level element. The length and content of the first line of text in the element limit its effects. The length of the first line depends on many factors, including the element's width, the document's width, and the text's font size. It has no effect when the first child of the element, which would be the first part of the first line, is an inline block-level element, such as an inline table.

<p>
  Ullamco mollit sit laborum veniam. Sunt exercitation duis ut velit mollit
  deserunt. Sint dolore esse in fugiat aliqua. Ullamco mollit sit laborum
  veniam.
</p>
<style>
  p::first-line {
    color: #fda4af;
    text-transform: capitalize;
    background-color: #164e63;
  }
</style>

::file-selector-button

Represents the button of an <input> of type="file".

<form>
  <label for="fileUpload">Upload file </label
  ><input type="file" id="fileUpload" />
</form>
<style>
  input[type="file"]::file-selector-button {
    border: 2px solid #164e63;
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
    background-color: #fda4af;
    transition: 1s;
    color: #164e63;
  }
</style>

::placeholder

Represents the placeholder text in an <input> or <textarea> element.

<input placeholder="Hey, How are you?" />

<style>
  ::placeholder {
    color: #fda4af;
  }
</style>

::selection

Applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

<div>
  This text has special styles when you highlight it.
  <p>Also try selecting text in this paragraph.</p>
</div>
<style>
  ::selection {
    color: #fda4af;
    background-color: #f8fafc;
  }
  p::selection {
    color: #164e63;
    background-color: #e5e7eb;
  }
</style>

::marker

selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
<style>
  ul li::marker {
    color: #fda4af;
    font-size: 1.5em;
  }
</style>

Browser Compatibility

Conclusion

Thank you for your time. I hope you found it useful. ❤️

If you enjoyed this article and want to be the first to know when I post a new one, you can follow me on Twitter @habibawael02 or here at Habiba Wael

CSSpseudo elements