Overflow property on before and after pseudo elements

Question

I am applying overflow property on before and after pseudo-elements. I am not able to get this behavior after that being applied.

p { 
   border: 3px solid green;
   background-color: rgb(177, 215, 252);
}
 
p::after{
  content: "hello";
  background: red;
  display: inline-block;
  width: 100%;
}

Before applying overflow:hidden to p::after it appears like this:

After applying overfow:hidden to p::after it appears like this:

My question is what is this behaviour ? How overflow is working with pseudo element here.

One more thing i noticed is that it only happens when display is set to inline block. Below is the example.

1.

p::after {
content: "hello";
background: red;
overflow: hidden;
}

2.

 p::after {
     content: "hello";
     background: red;
     display: inline-block;
     overflow: hidden;
}

overflow:hidden change the basline of the element – Temani Afif Dec 30 '20 at 08:04 — Temani Afif, Dec 30 '20 at 08:04

score 0 · Answer 1 · answered Dec 30 '20 at 03:45

This isn't an issue with the pseudo-element, this is an issue with the display: inline-block property and its default property value for vertical-align, which is baseline.

You can fix this either by using display: block or adding vertical-align: top to the pseudo-element.

p { 
   border: 3px solid green;
   background-color: rgb(177, 215, 252);
}
 
p::after{
  content: "hello";
  background: red;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

p + p:after {
  vertical-align: top;
}

<p>Hello this is text</p>
<p>Hello this is text - v2</p>

Here is one more example In this text animation is created using ::before and overflow:hidden property. When we remove overflow property there is some change. Can you please check out why it's like that ? https://jsfiddle.net/adisingh17/yoe4p2bn/19/ — Aditya Singh, Dec 30 '20 at 04:28

Overflow property on before and after pseudo elements

1 Answers1