伪元素不可见

时间:2018-02-08 14:00:58

标签: html css pseudo-element

尝试创建“聊天泡泡”类型的东西,这是我的代码。小三角形是通过伪元素::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>
    

1 个答案:

答案 0 :(得分:2)

实际上,它显示但隐藏了。在CSS中删除overflow: hidden;。见下文:

&#13;
&#13;
.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;
&#13;
&#13;