Question

我搜索了SO和谷歌，但我找不到答案。我想做一件简单的事情，但我不知道该怎么做。让我解释一下：

我正在使用Bootstrap创建一个HTML和CSS网站。在这个网站上，我把一些按钮作为字形，你可以在这里看到：http://i.imgur.com/Jp59ZO1.png（我还不能发布图像）。

以下是按键的代码，其余部分是相同的：

<a class="button" target="_blank" href="https://keybase.io/adolphenom">
    <i class="fa fa-key fa-lg"></i>
</a>

我想要做的是当我把光标放在按钮上时，它会在按钮底部显示一个文本（文本的CSS是一种颜色和一种字体，它现在不用担心我这么多）

我尝试了两到三个我找到的教程，但它不符合我的要求。

请问你能帮帮我吗？

提前致谢！

现在我有另一个问题。我做了@monkeyinsight对我说的话（但没有div，但有一个跨度，div打破了html中的其他所有元素），我还有另外一个问题：

当我放下图标的光标，但是我放了文字（因为我向下而不是向上），会发生这种情况：http://i.imgur.com/Ld3AFMC.png文字不会消失：（

你可以再帮我一次吗？谢谢你！

css代码'：

span {
    position: relative;
}

a.button {
  color: #00628B;
  margin-left: 7.5px;
  margin-right: 7.5px;
  -webkit-transition: color 0.15s ease-in, background 0.15s ease-in;
  -moz-transition: color 0.15s ease-in, background 0.15s ease-in;
  -ms-transition: color 0.15s ease-in, background 0.15s ease-in;
  -o-transition: color 0.15s ease-in, background 0.15s ease-in;
  transition: color 0.15s ease-in, background 0.15s ease-in;
}

a.button:hover, 
a.button:focus {
  color: #575757;
  text-decoration: none;
  outline: 0;
}

.twitter:hover::after, 
.twitter:focus::after {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 60px;
  content: "Contact by email";
  display: block;
  position: absolute;
  top: 15px;
  left: -65px;
  color: #81A594;
  text-decoration: none;
}

Span的代码：

<span class="twitter">
  <a class="button" target="_blank" href="mailto:adolphenom@gmail.com">
    <i class="fa fa-envelope-o fa-lg"></i>
  </a>
</span>

Answer 1

您应该使用CSS伪元素::after并分配内容，即{content: 'twitter'}

用css在底部显示文本

1 个答案: