Html 如何在CSS中创建垂直删除线？

我可以使用表格和背景图片来创建这个效果，但我真的希望能够使用CSS。可能吗

演示：

试试这个jsbin：

相关CSS

p {
  width: 50px;
  text-align: center; 
  position : relative;
}

p:before { 
  position: absolute;
  content : "";
  left  : 50%;
  top   : 0;
  height: 100%;
  width : 0;
  border-right: 1px #666 solid;

}

---

我已经改变了一点css。。。我没有给出width:50%，而是用left:50%定位伪元素，你能解释一下区别吗？我的意思是，这真的很重要吗？例如，一个或另一个会在移动设备上中断吗，这只是我：）它没有任何明显的区别。这可以应用于单个跨度而不是所有跨度或标记吗？@gtilflm为元素使用唯一的类名，并将css从

p

和

p:before

更改为

p.class-name

和

p.class-name:before