css - CSS 工具提示 :before

Question

我创建了一个基于 CSS 的文本前缀，如下所示:

.staff-only:before {
    font-family: "FontAwesome";
    content: "\f023";  /* padlock */
}

它在文本前面显示一个挂锁，表明该文本是 secret 的。我想显示一个提示(又名工具提示或 HTML5 标题)，内容为“仅对工作人员可见”，当用户将鼠标悬停在挂锁上时会显示该提示。我怎样才能实现它？

完整示例 到目前为止，在评论的帮助下，我(卡住)在这里:

.staff-only {
    background-color: #c1ebf3;
    color: #808080;
    padding-left: -2px;
    padding-right: 0.2em;
    border-radius: 3px;
}
.staff-only:before {
    font-family: "FontAwesome";
    content: "\f023";  /* padlock */
    color: silver;
    padding-left: 5px;
    padding-right: 5px;
}
.staff-only:after {
    font-family: "FontAwesome";
    content: "\f13e";  /* open padlock */
    color: silver;
    padding-left: 5px;
    padding-right: 5px;
}
.staff-only:hover .tooltiptext {
    visibility: visible;
}   
.staff-only .tooltiptext {
    visibility: hidden;
    background-color: rgba(255,255,255,0.5);
    color: darkred;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    border-style: solid;
    border-width: thin;
    width: 0;

    position: relative;
    z-index: 1;
    top: -25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
  <span class="staff-only">
      Secret text
      <span class="tooltiptext">Tooltip text</span> 
  </span>
</p>

这就是我得到的。屏幕截图显示两条评论，一条是公开的，一条是员工专用的。问题是员工专用评论右侧的空白区域，这似乎适合工具提示文本。无法应对:(

Answer 1

更新问题后，您应该用 <span> 包裹该元素:

.staff-only {
  background-color: #c1ebf3;
  border-radius: 3px;
  color: #808080;
  padding-left: -2px;
  padding-right: 0.2em;
}
.staff-only:before {
  font-family: "FontAwesome";
  content: "\f023";  /* padlock */
  color: silver;
  padding: 0px 5px;
}
.tooltip:hover:after {
  content: "Visible only to staff members!";
  color: silver;
  font-size:0.9em;
  padding:0 10px;
  background:black;
}
.tooltip-data:hover:after {
  content: attr(data-msg);
  color: silver;
  font-size:0.9em;
  padding:0 10px;
  background:black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
  <span class="tooltip">
    <span class="staff-only">Secret text</span>
  </span>
</p>
<p>
  <span class="tooltip-data" data-msg="Visible only to staff members!">
    <span class="staff-only">Secret text</span>
  </span>
</p>

---

原始答案:

您可以使用:after显示一个小工具提示:

.staff-only {
  background-color: #c1ebf3;
  border-radius: 3px;
  color: #808080;
  padding-left: -2px;
  padding-right: 0.2em;
}
.staff-only:before {
  font-family: "FontAwesome";
  content: "\f023";  /* padlock */
  color: silver;
  padding: 0px 5px;
}
.staff-only:hover:after {
  content: "Visible only to staff members!";
  color: silver;
  font-size:0.9em;
  padding-left:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
  <span class="staff-only">Secret text</span>
</p>