Using ::after and ::before
By using CSS, we can add text before or after the html tags we want. We can automatically add the texts we want to the end of the tags we specify with : :after and in front of them with :: before.
The text to be added is specified with the Content property. We can also format this text by specifying the style properties.
tagClassOrId::after {
content:"Text to insert";
/* Other style properties */
}
The text we specified will be inserted into the label we specified. For example, if we use p::after to specify "-Paragraph Break" to be added after all p tags, this text will be added at the end within the p tag, after which the p tag will be closed.
If we use ::before, the text will be added as soon as the p tag is opened, followed by the content of the tag.
Example: In the example below, the specified text is inserted at the last place in all p tags.
p::after{
content: "-Paragraph End";
color:gray;
}
In the example below, the text "Click the image to enlarge" is added to the end of the labels with the image class applied:
<style>
.image::after{
content:"Click the image to enlarge.";
/* We can also write our other style properties here */
}
</style>
...............
<a href="#"><div class="image">
<img src="images/sampleimage.jpg"/>
<br/>
</div></a>
More advanced examples can be made using after or before on buttons, galleries, etc. Check out the topic examples section.
Adding text before or after html elements, What does ::after do, What does ::before do, Examples of using ::after, Examples of using ::before
EXERCISES
|
::after tutorial: Adding text on button hover
|
Try It
|
|
Applying shadow effect to the boxes using after property
|
Try It
|
Read 783 times.