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 ??