CSS/Selectors/pseudo-elements/:before

From Web Education Community Group
< CSS‎ | Selectors
Jump to: navigation, search

Pseudo-classes ::before

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

Syntax

selector::before{ preperties }


Point, Note

  • 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]


Example

Example A

[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>

Css3 selectors before A.png

Example B

[style.css]

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


[index.html]

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

Css3 selectors before B.png

CSS defines the ::before pseudo-element in 7.4. The ::before and ::after pseudo-elements.