多个自定义列表同一行css,在项目符号之前将列表项与自定义CSS内容对齐

我有这段HT​​ML代码：

• Item 1
• Item 2
• Item 3.1
  Item 3.2
• Item 4
• Item 5
• Item 6

和CSS：

.custom {

list-style:none;

padding:0;

margin:0;

}

.custom li:before {

display:inline-block;

content:attr(data-bullet);

width:50px;

}

/*

.custom {

list-style:none;

padding:0;

margin:0;

}

.custom li:before {

display:inline-block;

content:attr(data-bullet);

position:relative;

top:0;

left:-50px;

}

.custom li {

padding-left:50px;

}

*/

它在列表项的内容之前使用CSS以创建自定义列表编号。问题是如果列表项的内容长于一行，则文本的对齐不能正常工作。

有没有办法正确对齐线条的内容？我已经尝试将内容定位为相对位置并为列表项添加填充(请参阅示例中的注释掉的css)，但这也不起作用。