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; }更多推荐
发布评论