什么＆＃39; 3 .column.size-1of3＆＃39;在内容之前做什么？

Question

我正在尝试设置salvattore插件来排列页面上的元素。

我们的项目在轨道上使用了超薄和红宝石：

这是html结构

div id="grid" datacolumns=""
    = render @foo

这是_foo.html.slim

div 
    |Some Text Here

插件页面说这样就足够了：

#grid[data-columns]::before {
    content: '3 .column.size-1of3';
}

.column { float: left; }
.size-1of3 { width: 33.333%; }

但是，之前的元素没有显示在页面上。我理解::之前是伪类，内容是添加的内容。

但是，我不明白的是'3 .column.size-1of3'如何转换为html以及为什么它不起作用。