Pure CSS Square brackets


This is just a quick thing I did while learning CSS pseudo elements :after and :before

I thought I should share it with my blog readers because I thought it could be worth sharing

Well not very complex or very attractive but this could give you a hint if you are trying to create square brackets purely in CSS or are trying to do something cool with :after and :before pseudo elements of CSS.

Lets check what I got in store for you. Lets check the CSS first.


[geshi lang=”css” nums=”1″ target=”_self” ]

The Markup

[geshi lang=”html5″ nums=”1″ target=”_self” ]

Its pretty straightforward HTML.

Lets now check the result when we launch our webpage the brackets will appear.


The Result

CSS square brackets

Now add a new property called border radius in :after and :before element styles

The Result

Above is ok I would thought and pretty easy to implement as well but will only work for SINGLE lines.

A more robust solution will be something like this

Updated CSS

[geshi lang=”css” nums=”1″ target=”_self” ]


Now this will work if you want to wrap your text within square brackets. Don’t forget to change the width to suit your need.

The Result

You can play around to see if you can come up with something other than what I’ve done.

:after and :before pseudo elements are explained in length in the articles below



I hope this helps









VN:F [1.9.22_1171]
Rating: 3.0/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
Pure CSS Square brackets, 3.0 out of 5 based on 2 ratings


  1. Helpful!

  2. Good work, really helped me with my work. Thanks a loooot.

  3. Thank you so much jaspreeth. It helped a lot

Leave a Reply