Ex:-

p::before { content: “Hello DevOpsSchool}

• normal
• none
• counter
• attr(attribute)
• string
• open-quote
• close-quote
• no-open-quote
• no-close-quote
• url(url)

The post How to use generated content at run time dynamically with the ::before and ::after pseudo-elements in CSS? appeared first on scmGalaxy.

Syntax: –

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

Ex: –

p::first-letter { color: red; }

• ::first-letter
• ::first-line
• ::selection
• ::before
• ::after

::first-letter-

This is used to add a style to the first letter of the specified selector (each). This can only be used with block-level elements.

• background properties
• font properties
• padding properties
• color properties
• margin properties
• border properties
• line-height
• text-transform
• text-decoration
• vertical-align (only if float is ‘none’)
• float
• clear

Ex: –

p::first-letter { color: red;}

::first-line-

This is used to add a style to the first line of the specified selector (each). This can only be used with block-level elements.

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

Ex: –

p::first-line { color: red;}

::selection-

This is used to matches the portion of an element that is selected by a user then apply the CSS rule in the selected content.

• background properties
• color properties
• cursor properties
• outline properties

Ex: –

p::selection { background-color: red; }

::before-

This is used to insert something before the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::before { content: “ Hello World”; }

::after-

This is used to insert something after the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::after { content: “ Hello DevOpsSchool”; }

The post How to use Pseudo Element in CSS? appeared first on scmGalaxy.