Pseudo-classes ::before

The ::before pseudo-element can be used to describe generated content before an element's content.

Syntax

selector::before{ preperties }

When the ::first-letter and ::first-line pseudo-elements are applied to an element having content generated using ::before, it applies to the first letter or line of the element including the generated content.[Example B]

[style.css]

 p::before{
   content: "Note. ";
   display: inline;
 }

[index.html]

<body>
  <p>In CSS 2.1, it is not possible to refer to attribute values 
     for other elements than the subject of the selector.</p>
</body>

[style.css]

 p.special::before{
   content: "Special! "
 }
 p.special::first-letter{
   color: #ffd800
 }

[index.html]

<body>
  <p class="special">Christmas Party.</p>
</body>