How can we add borders using before after?
Answers (1)
Add AnswerSee this example if you want to give to Div after and before.
.test-box { position: relative; }
Example for after.
Way 1:
.test-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.
.test-box:after { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 5px solid #000; }
Example for before.
Way 1:
.test-box:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 5px solid #000; }
Way 2:
.test-box:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-top: 5px solid #000; }
after and before only work with “content”.
You must use “Content” if you want to give it to Div after or before.
Review the below image.
I have add border top and bottom using after and before.