时间戳

首页 > 解决方案 > 以字体显示标题 - 真棒图标

css - 以字体显示标题 - 真棒图标

问题描述

我想知道当鼠标悬停在字体真棒图标上时是否可以显示文本/标题

.title {
  color: green;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="title"><i class="fa fa-exchange fa-2xfa fa-exchange fa-2x" aria-hidden="true"></i></div>

标签： csshtmlfont-awesome

解决方案

:after也许在伪元素中具有数据属性

attr() @MDN

.fa {
  position: relative;
}

.fa:hover::after {
  content: attr(data-title);
  padding-left: .25em;
  position: absolute;
  bottom: 0;
  margin-bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: .5em;
  color: red;
}

div {
  color: green;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-exchange fa-2x" aria-hidden="true" data-title="Exchange"></i></div>

推荐阅读