Providing Solutions For Web Development Languages and Platforms

CSS Pseudo Elements Has The Power To Boost Your Content

CSS Pseudo Elements

CSS Pseudo Elements are the stylers used to make innovative and catchy elements.

Pseudo elements in css are used with selectors (p,div,span etc.) to provide them the effects defined. It decreases our effort of writing Decorative Scripts.

Pseudo Elements can be considered as keywords used to Style first-letter, first-line of an element. It also allows insertion of content before / after the element.

Common Syntax for Pseudo Elements



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

Most Commonly Used CSS Pseudo Elements


Here is the table showing CSS Pseudo Elements with the purpose of using them.

Pseudo Elements Description Syntax
::after CSS after inserts something as a content after an element. selector::after
::before CSS before inserts something as a content before an element selector::before
::first-letter CSS first letter selects the first letter of the selector and apply defined styles to it. selector::first-letter
::first-line CSS first line selects the first line of the selector and apply defined styles to it. selector::first-line
::selection CSS selection selects a portion of an element selected by user to apply effects and styles to. selector::selection

Use of Pseudo Elements with Examples


The examples below shows perfect use of Pseudo Elements. Go through each of them and pick the one that you need in your project.

CSS First Line

First line pseudo element applies defined styles to first line of a paragraph. Length of first line depends on width of browser window or containing element.

The following example will clear first-line Pseudo Element to you properly :

Default paragraph without any style used for First Line –

I am the first line of the paragraph which is default as no first-line pseudo element is used to style me. My length depends on your browser width and my container too.

Observe the change after applying ::first-line Pseudo Element


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

I am the first line of the paragraph which is red in color and has different font style as i am styled with first-line pseudo element. My length depends on your browser width and my container too.

List of properties applicable to ::first-line Pseudo Element :

  1. font properties
  2. color properties
  3. background properties
  4. word-spacing
  5. letter-spacing
  6. text-decoration
  7. vertical-align
  8. text-transform
  9. line-height
  10. clear

CSS First Letter

First letter pseudo element applies defined styles to only first letter of a paragraph.

The following example will clear first-letter Pseudo Element to you properly :

Default paragraph without any style used for First Letter –

I am the first line of the paragraph whose first letter is default as no style is added to me using first-letter pseudo element. My length depends on your browser width and my container too.

Observe the change after applying ::first-letter Pseudo Element


p::first-letter{
    color: #ff000f;
    font-size: xx-large;
}

I am the first line of the paragraph whose first letter is larger in size and of different color as i am styled with first-letter pseudo element. My length depends on your browser width and my container too.

List of properties applicable to ::first-letter Pseudo Element :

  1. font properties
  2. color properties
  3. background properties
  4. margin properties
  5. padding properties
  6. border properties
  7. text-decoration
  8. vertical-align (only if “float” is set to “none”)
  9. text-transform
  10. line-height
  11. float
  12. clear

You can also use Pseudo Elements with CSS classes to define styles.


p.content::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

This code will only style as red colored and different font style, the first line of paragraph having class defined as content.


p.content::first-letter {
    color: #ff000f;
    font-size: xx-large;
}
p.content::first-line {
    color: #ff000f;
    font-variant: small-caps;
}

Both first line and first letter Pseudo Element applied

Before CSS Pseudo Element

Before pseudo element helps in inserting some useful content before content of an element.

The code shown below will add a tick icon image before your list content.


ul li::before {
    background-image: url(‘tick.gif’);
}

Here is the expected layout –

List of items showing Tick Icon Image before it using before CSS Pseudo Element

After CSS Pseudo Element

After pseudo element helps in inserting some useful content after content of an element.

The code shown below will add a tick icon image before your list content.


ul li::after{
    background-image: url(‘tick.gif’);
}

Here is the expected layout –

List of items showing Tick Icon Image after it using after CSS Pseudo Element

Know more about Before CSS and After CSS

Selection Pseudo Element

Selection CSS Pseudo Element apply styles to the text selected by user. This helps in providing background color and text color to content only when user makes a selection of the text.

Valid CSS Properties applicable –

  1. color
  2. background
  3. cursor
  4. outline

Take a look at the code below which makes me change my colors upon selection. Try Selecting Me…..


p::selection  {
    background: black;
    color: white;
}

Leave a Reply

%d bloggers like this: