伪元素未显示在 div 上答案

【问题标题】：pseudo elements not showing on div伪元素未显示在 div 上
【发布时间】：2017-09-17 17:43:11
【问题描述】：

我有一个用于 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;
}

$(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 工作正常。感谢您提供任何见解。

【问题讨论】：

标签： javascript jquery css jquery-ui-tabs

【解决方案1】：

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

【讨论】：

【解决方案2】：

你需要给你的伪元素一些尺寸（高度和宽度）让它们显示出来；否则它们只会适合内容，在您的情况下是空白的。我怀疑因为看起来您正在使用它们来创建框架效果，所以您还需要绝对定位它们，以便它们不会“推”您的内容。

最后，你要小心不要因为容器上的“溢出隐藏”而最终隐藏它们......我不确定你正在寻找什么效果，但正在修补它，我最终得到了这样的结果：

.ui-tabs .ui-tabs-panel {
  height: 140px;
  padding: 20px 40px;
  margin: 0px 30px 80px 30px;
  background: #5643ce;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
.ui-tabs .ui-tabs-panel:before {
  content: "";
  top: 10px;
  left: 5px;
  position: absolute;
  height: 80%;
  width: 100%;
  transform: rotate(-5deg);
  box-shadow: 7px 6px 15px #333;
}

参见 codepen 示例：https://codepen.io/kball/pen/QqjrvB

【讨论】：

感谢您。出于某种原因，伪元素正在显示，但位于页面顶部而不是 div 上。我怀疑这是因为选项卡是动态创建的，因此需要一秒钟才能正确设置样式。有什么办法可以延迟伪元素直到标签完全呈现？
您需要确保元素具有 position: relative 以便绝对定位将相对于它，否则它将相对于它找到的第一个祖先位置 relative（或绝对），这可能是页面

【解决方案3】：

在您的情况下，“显示：表”是罪魁祸首。我不知道您为什么使用显示表，但我相信有很多更好的方法可以获得您想要的输出，无论是垂直居中对齐还是布局等，而不使用显示表属性。

布局中表格的使用是敏感话题，但无论如何我都不是在诅咒表格。您可以查看https://colintoh.com/blog/display-table-anti-hero 以更好地了解。
使用显示表必须非常小心，因为它通常会导致许多意想不到的行为，并且我们经常最终会为我们想要的输出应用 hack。 Css flex 就像一个魅力，有可能完全取代表格，如果你愿意无视 IE8 和 IE9，甚至可以在这里为你提供帮助。

【讨论】：