尝试创建“聊天泡泡”类型的东西,这是我的代码。小三角形是通过伪元素::after
制作的,但我不能让它显示出来。
任何想法我做错了什么?
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
overflow: hidden;
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
<span class="playernamechat self-message">hello</span>
答案 0 :(得分:2)
实际上,它显示但隐藏了。在CSS中删除overflow: hidden;
。见下文:
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
/*overflow: hidden;*/
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
&#13;
<span class="playernamechat self-message">hello</span>
&#13;