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 available in Cascading Style sheets (Css):
You can also read our tutorial post on: Html Javascript
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.
<html>
<head>
<style type="text/css">
p:first-line {text-decoration: underline;}
p.noline:first-line {text-decoration: none;}
</style>
</head>
<body>
<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>
</body>
</html>
<head>
<style type="text/css">
p:first-line {text-decoration: underline;}
p.noline:first-line {text-decoration: none;}
</style>
</head>
<body>
<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>
</body>
</html>
You can also read our tutorial post on: 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.
<html>
<head>
<style type="text/css">
p:first-letter {font-size: 4em; text-color:blue;}
p.normal:first-letter {font-size: 10px;}
</style>
</head>
<body>
<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>
</body>
</html>
<head>
<style type="text/css">
p:first-letter {font-size: 4em; text-color:blue;}
p.normal:first-letter {font-size: 10px;}
</style>
</head>
<body>
<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>
</body>
</html>
You can also read our tutorial post on: Css Dimensions
The :before Pseudo-element
Following below is the example which shows how to use the :before element to add some content before any element.
<html>
<head>
<style type="text/css">
p:before {
content: url(/image/bullet.jpeg)
}
</style>
</head>
<body>
<p>This line will be preceded by a bullet.</p>
<p>This line will be preceded by a bullet.</p>
</body>
</html>
<head>
<style type="text/css">
p:before {
content: url(/image/bullet.jpeg)
}
</style>
</head>
<body>
<p>This line will be preceded by a bullet.</p>
<p>This line will be preceded by a bullet.</p>
</body>
</html>
You can also read our tutorial post on: Css Syntax
The :after Pseudo-elemant
Following below is the example which shows how to use the :after element to add some content after any element.
<html>
<head>
<style type="text/css">
p:after {
content: url(/image/bullet.jpeg)
}
</style>
</head>
<body>
<p>This line will be succeeded by a bullet. </p>
<p>This line will be succeeded by a bullet.</p>
</body>
</html>
<head>
<style type="text/css">
p:after {
content: url(/image/bullet.jpeg)
}
</style>
</head>
<body>
<p>This line will be succeeded by a bullet. </p>
<p>This line will be succeeded by a bullet.</p>
</body>
</html>
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.