wordpress - CSS 填充与 :after selector - how to make it work on main element independently 一起使用

Question

在 WordPress 小部件设计中，我使用 css :after 选择器为带有图像的小部件标题添加了阴影效果(我使用的是 LESS):

h3.widget-title{
  text-align: center;
  font-size: 16*@toRem;
  text-transform: uppercase;
  //line-height: 1.5;
  padding-bottom: 5px;
  margin-bottom: 10px;

  &:after{
    content: '';
    display: block;
    background: transparent url('images/widget-head-shade-1.png') no-repeat center center;
    width: 100%;
    height: 31px;
    position: absolute;
    left: 0;
  }
}

有了这些，我就有了这样的小部件标题效果:

但是，使用 padding-bottom: 5px; 它会在 :after 部分生效，同时也会占用阴影空间。但我只想将填充放在小部件标题的底部，以便在文本和阴影之间留出一些空间:

padding-bottom 在 :after 部分之后占用空间。您可以检查 in this fiddle - 打开和关闭 padding-bottom 行...

Answer 1

:after 和 :before 伪元素是它们添加到的元素的子元素......它们在内容之后或之前绘制(在你的小部件框内).调整容器的盒模型属性不会影响内容与伪元素之间的距离。因此，您需要将边距/间距添加到伪元素本身 - 使其远离内容。

例如这样的事情:

&:after {
  ...
  margin-top: 5px;
}