<li>带箭头的步骤</li>

时间:2014-04-28 15:54:33

标签: html css html5 css3 html-lists

我正在尝试制作一个带有箭头的HTML列表(类似于:步骤1-2-3)。

这是我要完成的结果的wireframeenter image description here

我猜这个图标和内容会是这样的:

<ul class="stepsCont"> 
  <li>
  <img src="icon" /> 
  <p>content</p>
  </li> 
</ul> 



.stepsCont li {display: inline; padding: 0 30px;}

但是如何添加箭头?

3 个答案:

答案 0 :(得分:3)

您可以将箭头作为:before伪元素的内容图片插入,从第二个<li>开始,例如

li + li:before {
   content: url(arrow.png);
   display: inline-block;
   vertical-align: middle;
   margin: 0 30px;
}

或者您也可以将箭头添加为背景

li + li  {
   background: url(arrow.png) center left no-repeat;
   padding-left: 50px;
}

Codepen示例http://codepen.io/anon/pen/mjCnA

(解决方案甚至都在IE8上工作。)

答案 1 :(得分:2)

您可以在之前使用之前使用

 .stepsCont li:after {
      content: ">";
      }

 .stepsCont li:last-child:after {
      display: none;
 }

您可以在此处设置背景图片而不是>

答案 2 :(得分:2)

您可以使用:after执行此类操作:

JSFiddle

.stepsCont li {display: inline; padding: 0 30px;} 

/*Added code*/

li:after{
    content:" >";
}

li:last-of-type:after{
    content:"";
}

然后设置:after

的样式