Have you ever needed to create a border or a line in CSS that isn't the whole width or height of your div? One easy way to tackle creating these lines is through using the ::before & ::after Pseudo Elements.
::before and ::after pseudo elements can be used to inject content before and after your stated div. In the cases above — we are using them to create these horizontal and vertical lines.
I will break down the code for these borders below . If you want to skip the explanation and head straight for the code — visit my codepen.
In the image above, you can see I have a div called .top-and-bottom and I am using ::before to inject some content before this div. The positioning is absolute (the div itself needs to have relative positioning on it so that the content is positioned correctly). After this, the CSS is quite simple. Just think of drawing a line. I want the width to be about 30% of the length of the div, the hight 3px and the I simply position the line where I want…
