html - 伪元素不可见

Question

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

Answer 1

其实是显而不显。在您的 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;
}

<span class="playernamechat self-message">hello</span>