如何parent在CSS中创建向下箭头，使其看起来像气泡？
这就是我尝试过的。
<div class="parent">TEST
<span class="tri">TEST</span>
</div>
.tri {
opacity: 0;
}
.tri:before {
position: absolute;
top: 40%;
left: 50%;
margin-top: -15px;
margin-left: -100px;
background-color: #FFF;
color: #000;
text-align: center;
padding: 10px;
min-width: 200px;
}
.tri:after {
border-top: 5px solid #000;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.parent:hover .tri:before, .parent:hover .tri:after {
opacity: 1;
}
您在这里缺少2件事：
内容：''; 对于伪
显示父伪
:before,
:after {
content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
opacity: 1;
}
:before,
:after {
content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
opacity: 1;
}
.tri {
opacity: 0;
}
.tri:before {
position: absolute;
top: 40%;
left: 50%;
margin-top: -15px;
margin-left: -100px;
background-color: #FFF;
color: #000;
text-align: center;
padding: 10px;
min-width: 200px;
}
.tri:after {
border-top: 5px solid #000;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}<div class="parent">TEST
<span class="tri">TEST</span>
</div>https://fiddle.jshell.net/0h05kbsd/3/
您还可以使用Unicode字符来保留一些代码，例如\25bc：
a:hover:after {
content:'\25bc';
}<a href> link to hover to show a down-arrow</a>Unicode资源以及其他资源：http : //unicode-table.com/en/sets/arrows-symbols/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句