How To Add Border Using After And Before

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

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories