html – 带CSS的方括号

我希望用CSS创建一个[和]括号.有没有办法指定顶部和底部边框(不切片图像)所以它看起来像一个括号？

.bracket {
  border-top:20px;
  border-bottom:20px;
  border-right:none;
  border-left: 1px solid black; 
}

解决方法

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

 <style>
.b:after{content:"]"}
.b:before{content:"["}
</style>

工作实例：http://codepen.io/yardenst/pen/bhGIy