css pseudo-elements

css pseudo-elements are used to add special effects to some selectors.

in css1 and css2, pseudo-element start with a colon(:),just like pseudo-classes.

in css3, pseudo-elements start with a double colon(::), which differentiates them from pseudo-classes.

the syntax of pseudo-classes:

                 selector:pseudo-element {property:value; }

the css classes can also be used with pseudo-classes.

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

the ::first-line pseudo-elements

the ::first-line pseudo-element describes the contents of the first formatted line of an element.

note :- the length of the first line depends on a number of factors, including the width of the page, font size, etc.

note :- the :first-line pseudo-element can only be used with block-level elements.

   <html>
    
       <head>
       
    <style type="text/css">
       
       p:first-line{ color:red;
       
       text-decoration:underline ;}
       
  </style>
       
    <body>

       <div>
       
       <p>the ::first-line pseudo-element is similar to an inline-level element, 
       
 but whith certain restriction.the following css property apply to a ::firtst-line 
 
  pseudo-element</p>
       
   </div>
   
   </body> <html>

note :-the following css properties apply to a :first-line pseudo-element:

  • font properties.
  • 'text-decoration'.
  • 'text-transform'.
  • 'letter-spacing'.
  • 'word-spacing'.
  • 'line-height'.
  • 'vertical-align'.
  • color property
  • background properties.

the :first-letter

the :first-letter element to add special effect to the first letter of elements in the document.

note :-the :first-line pseudo-element can only be used with block-level elements.

       <html>
       
        <head>
        
          <style type="text/css" >
          
       		p:first-letter{ color:red ;
       		
       				text-decoration:underline ;
       				
       				border:10px solid  #3a4b9c;
       				
       				padding:10px 10px;
       				}
       				
</style>

   <body>
   
       <div>
       
       <p>the ::first-line pseudo-element is similar to an inline-level element, but whith certain restriction.the following css property apply to a ::firtst-line  pseudo-element </p>
       
  </div>
  
</body> <html>

note :-the following css properties apply to a :first-line pseudo-element:

  • font properties.
  • 'text-decoration'.
  • 'text-transform'.
  • 'letter-spacing'.
  • 'word-spacing'.
  • 'line-height'.
  • 'vertical-align'.
  • 'float'
  • color property
  • background properties.
  • border properties.
  • margin properties.
  • padding properties.

the :after and :before  :psuedo-elements

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

the syntax - selector::before {properties}

the ::after pseudo-element can be used to describe generated content after an element's content.

the syntax - selector::after { properties }

       <html>
       
       <head>
       
            <style type="text/css" >
            
                      p:after{ content:url("/images/image 4.jpg") ;}
                      
                      p:before{  content:url("/images/image04.jpg") ;}
                      
  </style>
  
<body>

       <div>
       
       <p> specifies content to be inserted before another element.</p>
       
 </div>
 
</body>  <html>

all css :pseudo elements

selectordescription
::first-linerepresents the first formatted line of text.
::first-letterrepresents the first character of the first line of text within an element.
::afterspecifies content to be inserted after another element.
::beforespecifies content to be inserted before another element.
::selectionrepresents a part of the document that's been highlighted by the user.