How can we add borders using before after?

Forums CSSHow can we add borders using before after?
Staff asked 2 years ago

Answers (1)

Add Answer
Prince Dhameliya Marked As Accepted
Staff answered 2 years ago

See 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.

Subscribe

Select Categories