CSS：创建自定义列表项目符号[关闭](CSS: Create custom list bullets [closed])

有没有办法使用看起来像这样的CSS创建项目符号？

上图最能说明我想要达到的目标。 任何帮助将不胜感激。

Is there a way to create bullets using css that look like this?

Above picture best describes what I want to achieve. Any help would be greatly appreciated.

最满意答案

现场演示 / * HTML * /

<ul> <li>Point one <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Point two <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Point three <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Point four <br>Lorem adipiscing elit. </li> <li>Point five <br> Lorem consectetur adipiscing elit.</li> </ul> /*CSS*/ ul{list-style:none; padding:0} ul li { display: block; position: relative; padding: 0 0 0 40px; min-height:50px } li:last-child:after {display:none} ul li:after { content: ''; top: 11px; left: 0; background-color: #000; height: 100%; width: 2px; position: absolute; } ul li:before { content: ''; top: 10px; left: 0; background-color: #000; height: 2px; width: 30px; position: absolute; }

LIVE DEMO /* HTML*/

<ul> <li>Point one <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Point two <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Point three <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li>Point four <br>Lorem adipiscing elit. </li> <li>Point five <br> Lorem consectetur adipiscing elit.</li> </ul> /*CSS*/ ul{list-style:none; padding:0} ul li { display: block; position: relative; padding: 0 0 0 40px; min-height:50px } li:last-child:after {display:none} ul li:after { content: ''; top: 11px; left: 0; background-color: #000; height: 100%; width: 2px; position: absolute; } ul li:before { content: ''; top: 10px; left: 0; background-color: #000; height: 2px; width: 30px; position: absolute; }

更多推荐