Pseudo Element not visible

Question

Trying to create a "chat bubble" type of thing and here is my code. The little triangle is made via a pseudo element ::after but I can't make it show.

Any ideas what I am doing wrong?

 .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>

The issue is overflow: hidden; in the .playernamechat.self-message styling. The pseudo element is showing outside it, so this property is hiding it. — user9019817
– user9019817, Commented Feb 8, 2018 at 14:02
Is there a way to show it while keeping overflow: hidden. It is a chat bubble and I do not want it to overflow with text — EGxo
– EGxo, Commented Feb 8, 2018 at 14:03
Sorry, I don't think there's a way around that. Overflow will hide any content that's outside the constraints of the container. — user9019817
– user9019817, Commented Feb 8, 2018 at 14:04
You could change the position: absolute from :after with position: relative — Philipos D.
– Philipos D., Commented Feb 8, 2018 at 14:06
@SWC instead of using overflow:hidden I used overflow-wrap: break-word which did the same thing but allowed me to have a regular overflow. If you havent already go comment your answer so I can upvote it! — EGxo
– EGxo, Commented Feb 8, 2018 at 14:15

Andrew Bone · Accepted Answer · 2018-02-08 14:22:17Z

Actually, it is showing but hidden. In your CSS remove overflow: hidden;. See below:

.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>

Collectives™ on Stack Overflow

Pseudo Element not visible

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related