javascript - 伪元素不显示在 div 上

Question

我有一个用于 jquery 选项卡的 tabspanel 内容容器，我正在尝试使用伪元素向其应用高级框阴影。但是，由于某些原因，伪元素没有显示。

CSS

#about-us .ui-tabs .ui-tabs-panel {
  display: table;
  height: 140px;
  padding: 20px 40px;
  margin: 0px 30px 80px 30px;
  background: #5643ce;
  border-radius: 5px;
  color: #FFF;
  overflow: hidden;
}
#about-us .ui-tabs .ui-tabs-panel:before {
  content: "";
  display: inline-block;
  top: 52px;
  left: 5px;
  transform: rotate(-5deg);
  box-shadow: 7px 6px 15px #333;
}
#about-us .ui-tabs .ui-tabs-panel:after {
  content: "";
  display: inline-block;
  top: 52px;
  right: 5px;
  transform: rotate(5deg);
  box-shadow: -7px 6px 15px #333;
}

JQ

$(document).ready(function() {
$( "#about-us .tab.inner" ).parent().addClass( "tabs-container" );
$( "#tabs" ).tabs({
  event: "mouseover"
});
$('#tabs a, kill-a-action').click(function(e){
 e.preventDefault();
  return false;
});
$(window).resize(function() {
if ($(window).width() < 768) {
} else {
}
}).resize();
$("#select-loader").fadeOut();
setTimeout(function() {
    $("#tabs-wrapper").fadeIn();
}, 1000);
});

想知道问题出在哪里 -- 正常的 box-shadow 工作正常。感谢您的任何见解。

Answer 1

我认为你应该将伪元素定义为 block 而不是 inline-block ，并给它们 width 和 高度，否则它们将保持与其内容一样“大”，即 ""..