html - 在链接图标下添加文本

Question

我有这个链接，我嵌入到一个图标中，我想在图标本身下面添加一个描述文本。

示例：电子邮件图标，在它下面我会有“电子邮件”

这是我目前的链接，我想添加标题“电子邮件”

<a title="Email"  class="icon-envelope" data-bind="attr: { 'href': 'mailto:' + Email() }"></a>

我如何使用 css 和 html 的组合来实现这一点？

Answer 1

HTML

<a title="Email" class="icon-envelope" data-bind="attr: { 'href': 'mailto:' + Email() }">Email</a>

CSS

.icon-envelope {
    display:block; 
    width:100px;
    height:100px;
    padding:110px 0 0 0;
    background: url(http://placekitten.com/100/100) no-repeat;
    text-align:center;
}

JSFIDDLE

http://jsfiddle.net/GKC9e/

Answer 2

[详细]演示：http: //jsfiddle.net/FCP9k/

CSS

a[title] {
    position: relative;
    margin-bottom: 1em;
    width: 100px;
    height: 100px;
    display: block;
    background-image: url('http://placekitten.com/100/100'); /* Default image */
    border: 1px solid red;
    margin-bottom: 1em;
}
a[title="Email"] {
    background-image: url('http://placekitten.com/200/200'); /* Email icon */
}
a[title="SomethingElse"] {
    background-image: url('http://placekitten.com/300/300'); /* A different icon */
}

a[title]:after {
    content: attr(title);
    position: absolute;
    top: 100px;
    display: block;
    text-align: center;
    width: 100%;
    left: 0;
}

Answer 3

HTML

<a title="Email"  class="icon-envelope" data-bind="attr: { 'href': 'mailto:' + Email() }">Email</a>

CSS

.icon-envelope {
    padding-top:100px; /*height of bg image*/
    display:block;
}

Answer 4

<a href="foo">
    <img src="bar" alt="">
    <br>
    Email
</a>

或者

<a href="foo">
    <img src="bar" alt="">
    Email
</a>

和

a img { display: block; }