为何设置为inline的CSS伪元素仍能生效padding-top与padding-bottom？

这不是浏览器的问题，是符合CSS规范的正常行为，分两种情况解释：

1. 普通inline元素的padding上下确实生效 #

inline元素的padding-top和padding-bottom属性是有效的，只是不会改变元素所在行的行高，视觉上可能会延伸到上下行的区域，但元素本身的内边距是存在的，你可以通过背景色看到它的范围。

2. 你的代码里的特殊情况 #

看你提供的代码，h1::after伪元素设置了position:absolute——绝对定位的元素会脱离文档流，此时它的display计算值会自动变为block（除非显式设置为inline-table等特殊值），所以这个伪元素实际上是块级元素，padding:50px 6px自然会完全生效，和你提到的display:inline无关（代码里也没给这个伪元素设置display:inline）。

代码示例 #

h1 {
  width: 200px;
  margin: 20px auto;
  background-color: antiquewhite;
  position: relative;
}

h1::after {
  content: "Tst";
  color: black;
  background-color: red;
  font-size: 12px;
  padding: 50px 6px;
  position: absolute;
  top: -20px;
  right: -34px;
}

<h1>I have a test</h1>

内容的提问来源于stack exchange，提问作者newboy071