Tuesday, July 17, 2018

Pseudo elements (Css tutorial)

Hello guys! morning to you all, wishing you all a happy wednesday. Alright in my previous tutorial post i talked about Css Pseudo-classes. Am going to move on to the next topic which is Css Pseudo element.

Css Pseudo-elements are used to add special effects to some selectors. You do not need to use javascript or any other script to use those effects. A simple syntax of Pseudo-element is as follows:
selector:pseudo-element   {property: value}

Css classes can also be used with pseudo-elements:

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

Below are the following most commonly used with pseudo-elements:

You can also read: Javascript(Html)


Value

Description

:first-line

Use this element to add special styles to the first line of the text in a selector.

:first-letter

Use this element to add special styles to the first letter of the text in a selector.

:before

Use this element to insert some content before an element.

:after

Use this element to insert some content after an element.

The :first-line Pseudo-element
Following is the example which shows how to use :first-line element to add special effect to the first line of elements in the document.

<style type="text/css">
p:first-line  {text-decoration: underline;}
p.noline:first-line  {text-decoration: none;}
</style>
<p class="noline">This line will not have any underline because this belongs to noline class.</p>

<p>The first line of this paragraph will be underlined as defined in the css rule above. Rest of the lines in this paragraph will remain normal.</p>

You can also read: Css Pseudo classes

The :first-letter Pseudo-element
Following below is the example which shows how to use :first-letter element to add specail effect to the first letter of elements in the document.

<style type="text/css">
p:first-letter  {font-size: 4em; text-color:blue;}
p.normal:first-letter  {font-size: 10px;}
</style>
<p class="normal">The first letter of this paragraph will be normal and will have font size of 10px.</p>

<p>The letter of this paragraph will be 4em big and will have a blue  color as defined in the css rule above. The rest letters in the paragraph will remain normal.</p>

You can also read: Dimensions(Css tutorial)

The :before Pseudo-element
Following below is the example which shows how to use the :before element to add some content before any element.

<style type="text/css">
p:before
{
content: url(/image/bullet.jpeg)
}
</style>
<p>This line will be preceded by a bullet.</p>
<p>This line will be preceded by a bullet.</p>

You can also read: Syntax(Css tutorial)

The :after Pseudo-elemant
Following below is the example which shows how to use the :after element to add some content after any element.

<style type="text/css">
p:after
{
content: url(/image/bullet.jpeg)
}
</style>
<p>This line will be succeeded by a bullet.</p>
<p>This line will be succeeded by a bullet.</p>

Alright thats it for this tutorial on CSS Pseudo-element, always feel free to ask your questions.
Follow us on all our social media platforms and share this post to friends. Finally you can appreciate the knowledge shared here by commenting below. 

See you in my next tutorial, thanks and bye for now.
Share:

0 comments:

Post a Comment