In this topic,
We are going to see how to add borders using after and before.
First of all, Create HTML in the index.html file.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Border</title> </head> <body> <div class="border-box"> </div> </body> </html>
Now you add CSS in <style>…</style> tag in index.html file.
.border-box{
height: 350px;
width: 100%;
background: #ddd;
position: relative;
}
after and before only work with “content”.
You must use “Content” if you want to give it to Div after or before.
Example for after:
You can add a border in 2 ways.
Way 1:
.border-box:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 5px solid #000;
}
Way 2:
Even if you do not give 100% width and give left:0 right:0, your border will cover the entire width.
.border-box:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
border-top: 5px solid #000;
}
Example for before:
.border-box:before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 5px solid #000;
}
Way 2:
.border-box:before{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 5px solid #000;
}
Review the below image.
I hope you guys found something useful ??
