For main element with before or after is need to be set display inline-block when use margin and padding?

Because if is inline then cant apply margin and padding on bottom
I mean:

.test
{
display: inline-block; // or can leave it?
}

.test::after
{
margin: 10px;
padding: 10px;
display: inline-block; // or can leave it?

}

.test::before
{
margin: 10px;
padding: 10px;
display: inline-block; // or can leave it?
}

Logic?

Thank you.

The pseudo-element is a child of the element where ::before/::after is defined.

The display property is not inherited from a parent element by default. You can set it to be by using display: inherit; on the child. Or in this case, you can just set the desired display property on the pseudo-element itself.

1 Like