html - 如何在伪元素旁边制作一个箭头:hover::before 元素

Question

这是我的代码

.privacycheck1 {
  position: relative;
  top: 265px;
  background-color: #CF0000;
  width: 24px;
  height: 24px;
  left: 843px;
  border-radius: 50px;
  border: 5px #E60000;
}
.privacycheck1::before {
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  left: 30px;
}
.privacycheck1:hover::before {
  content: 'This information is private';
  width: 125px;
  height: 35px;
  background-color: #CF0000;
  left: 40px;
  top: -10px;
  font-family: arial;
  font-size: 15px;
  font-weight: 100px;
  color: white;
  padding: 10px;
}

<div class="privacycheck1"></div>

我想做到这一点，当有人悬停 privacycheck1 时，我希望他们看到一个箭头连接到指向 privacycheck1 的方框> 的圈子。 反正有类(class)做课吗？

Answer 1

您可以使用额外的 span 元素来创建它。

首先使用 span 创建箭头的尾部，然后使用 after 伪元素上的 border-hack 创建箭头。您可以找到范围广泛的箭头 here

.privacycheck1 {
  position: relative;
  top: 30px;
  background-color: #CF0000;
  width: 24px;
  height: 24px;
  left: 30px;
  border-radius: 50px;
  border: 5px #E60000;
}
.privacycheck1::before {
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  left: 30px;
}
.privacycheck1:hover::before {
  content: 'This information is private';
  width: 125px;
  height: 30px;
  background-color: #CF0000;
  left: 40px;
  top: -10px;
  font-family: arial;
  font-size: 15px;
  font-weight: 100px;
  color: white;
  padding: 10px;
}
.arrow {
  position: absolute;
  width: 15px;
  height: 5px;
  background: green;
  left: 20px;
  top: 8px;
  display:none;
}
.arrow:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid green;
  left:15px;
  top:-2px;
  display:none;
  }
.privacycheck1:hover span,.privacycheck1:hover span:after{
  display:block;
  }

<div class="privacycheck1"><span class="arrow"></span>
</div>