 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study lesson-40.
In our previous lesson, we have studied CSS pseudo-classes.
Today we will learn CSS pseudo-elements.
CSS pseudo-elements
In our previous lesson we have studied pseudo-classes. Pseudo-classes give special effects to elements. Pseudo-elements are used to apply styles to a part of an element. Syntax for writing a pseudo-element is similar to that of a pseudo-class. It is as follows:
selector: pseudo-element {property: value}
We can also use pseudo-elements with classes. Syntax for this is as follows:
selector.class: pseudo-element {property: value}
We will look at some pseudo-elements.
First-letter pseudo-element
This is used to give special effect to the first letter only.
First-line pseudo-element
First line pseudo-element is used to apply style to first line in a paragraph.
Before pseudo-element
This is displayed before contents of an element are displayed.
After pseudo-element
This is displayed after contents of an element are displayed.
Some other pseudo-elements are as follows:
1. marker, 2. place-holder, 3. spelling-error, 4. back-drop, 5. selection.
Let us write some pseudo-elements in our script. Open a new Notepad file and copy code from lesson-39-2 in this file. Delete all code written under <style>. In body we have given some <b> and </b> tags in second paragraph. Delete all these tags.
Now write following code in style:
p:first-letter {
color: red;
font-size: 5vw;
font-family: Blackadder ITC;
}
p:first-line {
color: green;
font-weight: bold;
}
Save this file as "Lesson-40-1" and "Lesson-40-1.html".
 |
| Figure 40-1. CSS CSS pseudo-elements - First-letter and First-line |
Double click on HTML file and see the output.
 |
| Figure 40-2. CSS pseudo-elements - First-letter and First-line |
Note that first letter of every paragraph is displayed in the style that we have mentioned. Also, first sentence in each paragraph is displayed in green and bold.
We can use CSS font properties, background, color, margin, padding, border and so on with pseudo-elements.
Now we will study "before" and "after" pseudo-elements. We will use them in our script. Once again open a new Notepad file. Copy all code from lesson-40-1 in this file. Delete code written under <style> and write the following:
p:before {
content: 'Before Paragraph';
font-weight: bold;
color: red;
border: 0.2vw dotted green;
}
In the same way write code for pseudo-element "after".
p:after {
content: 'After Paragraph';
font-weight: bold;
color: green;
border: 0.2vw solid blue;
}
In this code we have given two different styles for borders displayed. We have written text "Before Paragraph" in the style of pseudo-element "before". This will be displayed before actual contents of "p" begin. In the similar manner, we have used "after" pseudo-element. This will be displayed after contents of "p" element. We have used "content" for doing this. We can also specify
content: " "
Save this file as "Lesson-40-2" and "Lesson-40-2.html".
 |
| Figure 40-3. CSS pseudo-elements - before and after |
Double click on HTML document and see the output.
 |
| Figure 40-4. CSS pseudo-elements - before and after |
Output of "before" and "after" pseudo-elements is displayed.
Important Points:
1. Pseudo-elements are used to apply style to a part of an element.
2. First-letter is used to apply style to only first letter and first-line is used to apply style to first line only.
3. Pseudo-element "before" is used to apply styles before contents of an element. Similarly pseudo-element "after" is used to apply styles after the contents of an element are displayed.
Lesson-39 Lesson-41
