html - 如何仅使用 CSS 在 <a> 元素内添加图标

Question

我已经为向导创建了这个 header :

Js fiddle 链接: http://jsfiddle.net/7bduw43j/

HTML代码:

<ul id="wizHeader">
<li>
<a href="#" class="currentStep">Step 1</a>
</li>
<li>
<a href="#" class="nextStep">Step 2</a>
</li>
<li>
<a href="#" class="nextStep">Step 3</a>
</li>

CSS:

 #wizHeader li .prevStep
{
    background-color: #669966 !important;
}
#wizHeader li .prevStep:after
{
    border-left-color:#669966 !important;
}
#wizHeader li .currentStep
{
    background-color: #3B96B6 !important;
}
#wizHeader li .currentStep:after
{
    border-left-color: #3B96B6 !important;
}
#wizHeader li .nextStep
{
    background-color:#C2C2C2 !important;
}
#wizHeader li .nextStep:after
{
    border-left-color:#C2C2C2 !important;
}
#wizHeader
{
    list-style: none !important;
    overflow: hidden !important;
    font: 15px Helvetica, Arial, Sans-Serif !important;
    margin: 0px !important;
    padding: 0px !important;
}
#wizHeader li
{
    float: left !important;
}
#wizHeader li a
{
    color: white !important;
    text-decoration: none !important;
    padding: 10px 0 10px 55px !important;
    background: brown !important; /* fallback color */
    background: hsla(34,85%,35%,1) !important;
    position: relative !important;
    display: block !important;
    float: left !important;
}
#wizHeader li a:after
{
    content: " " !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 50px solid transparent !important; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent !important;
    border-left: 30px solid hsla(34,85%,35%,1) !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -50px !important;
    left: 100% !important;
    z-index: 1 !important;
}
#wizHeader li a:before
{
    content: " " !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 50px solid transparent !important;
    border-bottom: 50px solid transparent !important;
    border-left: 30px solid white !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -50px !important;
    margin-left: 1px !important;
    left: 100% !important;
    z-index: 1;
}        
#wizHeader li:first-child a
{
    padding-left: 10px !important;
}
#wizHeader li:last-child 
{
    padding-right: 50px !important;
}
#wizHeader li a:hover
{
    background: #FFC13C !important;
}
#wizHeader li a:hover:after
{
    border-left-color: #FFC13C !important;
}

我想实现的效果是这样的: Telerik Wizard Example 每个步骤旁边都有一个小数字图标。 我将如何仅使用 css 来实现这一点？

非常感谢!!

Answer 1

您可以使用 CSS 做出类似的效果。 <强> JSFIDDLE DEMO

只需在网站内添加数字 <li> <span class="no">1</span>并使用“无”类名应用样式。

试试下面的代码。

<ul id="wizHeader">
    <li>
        <a href="#" class="currentStep"><span class="no">1</span> Step 1</a>
    </li>
    <li>
    <a href="#" class="nextStep"><span class="no">2</span> Step 2</a>
    </li>
    <li>
    <a href="#" class="nextStep"><span class="no">3</span> Step 3</a>
    </li>
</ul>

CSS

#wizHeader li .prevStep
{
    background-color: #669966 !important;
}
#wizHeader li .prevStep:after
{
    border-left-color:#669966 !important;
}
#wizHeader li .currentStep
{
    background-color: #3B96B6 !important;
}
#wizHeader li .currentStep:after
{
    border-left-color: #3B96B6 !important;
}
#wizHeader li .nextStep
{
    background-color:#C2C2C2 !important;
}
#wizHeader li .nextStep:after
{
    border-left-color:#C2C2C2 !important;
}
#wizHeader
{
    list-style: none !important;
    overflow: hidden !important;
    font: 15px Helvetica, Arial, Sans-Serif !important;
    margin: 0px !important;
    padding: 0px !important;
}
#wizHeader li
{
    float: left !important;
}
#wizHeader li a
{
    color: white !important;
    text-decoration: none !important;
    padding: 10px 0 10px 38px !important;
    background: brown !important; /* fallback color */
    background: hsla(34,85%,35%,1) !important;
    position: relative !important;
    display: block !important;
    float: left !important;
}
#wizHeader li a:after
{
    content: " " !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 50px solid transparent !important; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent !important;
    border-left: 30px solid hsla(34,85%,35%,1) !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -50px !important;
    left: 100% !important;
    z-index: 1 !important;
}
#wizHeader li a:before
{
    content: " " !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 50px solid transparent !important;
    border-bottom: 50px solid transparent !important;
    border-left: 30px solid white !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -50px !important;
    margin-left: 1px !important;
    left: 100% !important;
    z-index: 1;
}        
#wizHeader li:first-child a
{
    padding-left: 10px !important;
}
#wizHeader li:last-child 
{
    padding-right: 50px !important;
}
#wizHeader li a:hover
{
    background: #FFC13C !important;
}
#wizHeader li a:hover:after
{
    border-left-color: #FFC13C !important;
}
.no{
    display: inline-block;
    background: #FFF;
    color: #333;
    padding: 5px;
    border-radius: 50%;
    width: 16px;
    text-align: center;
    font-size: 13px;
}