Square brackets with CSS

css, css-shapes, html

Solution

.b:after {
  content: "]"
}

.b:before {
  content: "["
}

<span class="b">text</span>

working example: http://codepen.io/yardenst/pen/bhGIy

Problem

I wish to create a `[` and `]` bracket just with CSS. Is there a way to specify the top and bottom border (Without slicing the image) so it looks like a bracket? ``` .bracket { border-top:20px; border-bottom:20px; border-right:none; border-left: 1px solid black; } ```

Original source