How can we add borders using before after?

Forums CSSHow can we add borders using before after?
Staff asked 1 month ago

Answers (3)

Add Answer
Staff answered 1 month ago
#yourClass:after
{
   content: "";
    width: 40px;
    height: 3px;
    background-color: #529600;
    left: 0;
    position: relative;
    display: block;
    top: 10px;
}

 

Staff answered 1 month ago
#yourClass:before
{
   content: "";
    width: 40px;
    height: 3px;
    background-color: #529600;
    left: 0;
    position: relative;
    display: block;
    top: 10px;
}

 

Staff answered 1 day ago

See this example if you want to give to Div after and before.

.test-box {
    position: relative;
}

Example for after.

.test-box:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 5px solid #000;	
}

Example for before.

.test-box:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 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