如何在<a> element using only CSS</a>内添加图标

时间：2015-01-23 10:39:16

标签： html css

我为向导创建了此标题：

Js Fiddle Link： 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实现这一目标？

非常感谢!!

4 个答案:

答案 0 :(得分：1)

你可以使用CSS做类似的事情。的 JSFIDDLE DEMO

只需在<li> <span class="no">1</span>中添加数字，然后使用＆＃39; no＆＃39;班级名称。

尝试以下代码。

<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;
}

答案 1 :(得分：0)

这很简单......下面的代码可能对您有所帮助

<li>
   <a href="#" class="currentStep">
      <span>
         <span><img src="path/to/img"></span>
         <span>Step 1</span>
      <span>
   </a>
</li>

对每个li重复上述步骤。

答案 2 :(得分：0)

请像这样清理代码

中添加你的离子

＆＃13;
＆＃13; 
#wizHeader
{
    list-style: none;
    overflow: hidden;
    font: 15px Helvetica, Arial, Sans-Serif;
    margin: 0px;
    padding: 0px;
}
#wizHeader li
{
    position: relative;
    float: left;
    background: #C2C2C2;
}

#wizHeader li a
{
    color: white;
    text-decoration: none;
    padding: 10px 0 10px 55px;
    position: relative;
    display: block;
    float: left;
}
#wizHeader li:after
{
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #C2C2C2;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 1;
}
#wizHeader li:before
{
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}        
#wizHeader li:first-child a
{
    padding-left: 10px
}
#wizHeader li:last-child 
{
    padding-right: 50px
}

#wizHeader li.prevStep
{
    background-color: #669966
}
#wizHeader li.prevStep:after
{
    border-left-color:#669966
}
#wizHeader li.currentStep
{
    background-color: #3B96B6
}
#wizHeader li.currentStep:after
{
    border-left-color: #3B96B6 
}
#wizHeader li.nextStep
{
    background-color:#C2C2C2
}
#wizHeader li.nextStep:after
{
    border-left-color:#C2C2C2
}

#wizHeader li:hover
{
    background: #FFC13C
}
#wizHeader li:hover:after
{
    border-left-color: #FFC13C
}
＆＃13; 
<ul id="wizHeader">
	<li class="currentStep">
	<a href="#">&reg; Step 1</a>
	</li>
	<li class="nextStep">
	<a href="#">&copy; Step 2</a>
	</li>
	<li class="nextStep">
	<a href="#">&Theta; Step 3</a>
	</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以使用：之前或之后的伪类及其属性内容。 内容的性质：可以用作反击：

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

和CSS：

h3:before {
  counter-increment: section;
  content: "Section" counter(section) ": ";
}

第一个字符串是＆＃34; Section＆＃34;。比计数h3标签而不是＆＃34;：＆＃34;是迭代次数之后会出现的。

输出：

Section1: Introduction
Section2: Body
Section3: Conclusion

你也可以有嵌套的部分（例如1.2 1.3等） 参考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

相关问题
最新问题