我创建了一个带有before-pseudo元素的“header”元素。该假元素必须在父元素之后。
一切都很好，直到我给我的“头”一个z指数。

我想要的：前景上的黄色“标题”，背景中的红色伪元素和黄色“标题”元素上的简单z索引为30。

header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30; /*This is the problem*/
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}

您可以在此链接(http://jsfiddle.net/tZKDy/)上测试我的问题，并且您在de’header’元素上设置/删除z-index时会看到问题。

:: before伪元素放置在头元素内。

CSS Spec：

The :before and :after pseudo-elements interact with other Boxes as if they were real elements inserted just inside their associated element.

设置头元素creates a new Stacking Context的z-index，因此您创建的新伪元素不能浮动在头元素后面，因为它必须在该堆叠上下文之外。

我建议您简单地在头元素之前添加另一个元素，因此默认情况下它会正确堆叠。 Example。

包含在单独div元素中的一系列ul元素不仅需要在其前面的伪元素中具有正确的内容,而且还要使粗体标记标题与列表相邻.

此外,如果有问题的div中没有​​列表,则不应出现任何内容.这就是为什么我在寻找CSS作为解决方案的原因,因为如果我在div中对标题进行硬编码,那么如果没有列表存在则会出现.

我无法预测这个唯一div的哪些实例会提前提供ul – 我们的应用程序根据用户输入从下拉菜单生成内容,因此如果从未使用过菜单,则不会创建ul.

我无法使用任何类型的JavaScript进行此标记过程.

这是我想看到的：

Foo项目

列表一

> aaaa
> bbbbb
> cccc

清单二

> defdefdef
> ghighighi

酒吧项目

列表一

> xxx
> yyy

清单二

> zzzzzzz
> aaaabbbbccc

目前我正在尝试使用ul的alt属性来填充div：before area.希望有一种方法来定义CSS,它表示“对于包含.exam类元素的每个div,将ul的attr(alt)放在div：before元素之前”.

这就是我尝试过的：

<div>
    <b>Far</b>
    <ulalt="Foo Items">
        <li>Stuff</li>
        <li>Things</li>
    </ul>
    <b>Near</b>
    <ulalt="Foo Items">
        <li>dunno</li>
    </ul>
</div>
<div>
    <b>Far</b>
    <ulalt="Bar Items">
        <li>Foo</li>
    </ul>
    <b>Near</b>
    <ul>
        <li>bar</li>
        <li>eggs</li>
    </ul>
</div>

和CSS一起去：

div > .exam:first-of-type:before {
    content:attr(alt);
    font-style:italic;
}
ul {
    margin:0 0 1em 1em;
    padding:0;
}
li {
    margin-left:2em;
}

请在这里查看jsfiddle链接 – https://jsfiddle.net/f6gwyvuu/

我意识到这有点令人费解但不幸的是,这是解决应用程序生成其内容的方式的结果.我真的无法控制它,我只能对它创建的元素进行风格化.

提前致谢.

首先,ul元素不能具有alt属性.您可以使用自定义数据 – *属性.

并且在每个ul中重复相同的数据没有多大意义.相反,只将它添加到div.

然后,你可以使用

div:not(:empty):before {
  content: attr(data-alt);
  display: block;
}

div:not(:empty):before {
  content: attr(data-alt);
  display: block;
  font-style: italic;
}
ul {
  margin: 0 1em;
  padding: 0;
}
li {
  margin-left: 2em;
}

<div data-alt="Foo Items">
  <b>Far</b>
  <ul>
    <li>Stuff</li>
    <li>Things</li>
  </ul>
  <b>Near</b>
  <ul>
    <li>dunno</li>
  </ul>
</div>
<div data-alt="Baz Items"></div>
<div data-alt="Bar Items">
  <b>Far</b>
  <ul>
    <li>Foo</li>
  </ul>
  <b>Near</b>
  <ul>
    <li>bar</li>
    <li>eggs</li>
  </ul>
</div>

看到：

http://jsfiddle.net/Kq2PY/

div与z-index 5相对,并且：after之后是z-index 2的绝对值.

所以不应该：在div后面？

你必须给伪元素一个负的z-index来让它落后于它的父元素,再加上父元素的z-index.
http://jsfiddle.net/jklm313/Kq2PY/4/

我有一个图标：在伪元素之前,如果textelement变长并进入下一行,我希望它不会缠绕我的伪元素但保持它的距离.

这是我的例子的链接：
http://jsbin.com/yosevagaqa/1/edit?html,output

如果您调整窗口大小以使文本强制进入新行,则可以看到问题.

我怎么能避免这个？

从其他答案中可以看出,有多种解决方案！

如果：之前的平方大小始终相同,则另外一个解决方案是添加

.link {margin-left:25px; text-indent:-25px;}

到CSS.这会导致整个块向右移动,除了包含正方形的第一行,它会“缩进”.

http://jsfiddle.net/MrLister/3xbfyqkh/

或者我更喜欢的是,在ems中的大小,以便红色方块取决于字体大小.

.link:before {
  /* .. */
  width: 1em; height: 1em;
  margin-right: .5em;
}

.link {margin-left:1.5em; text-indent:-1.5em;}

当然,确保缩进与正方形边距的大小相同.

http://jsfiddle.net/MrLister/3xbfyqkh/1/

另一种方法,因为目的是制作一个自定义的“子弹”,将h5视为列表项.然后你不需要:: before技巧.你需要其他技巧才能使正方形尺寸合适……

.link {
    display:list-item; list-style:square;
    color:red;
    font-size:2em; line-height:.5em;
    margin:.5em 0 .5em 1em}

.link a {
    font-size:.417em; vertical-align:.3em}

http://jsfiddle.net/MrLister/3xbfyqkh/5/

这是一个我不太了解的关于z-index和css伪元素:: before / :: after的行为.

它在这个jsfiddle：http://jsfiddle.net/jgoyon/T6QCf/上有说明

我创建了一个定位框并使用:: after伪元素添加内容(也定位).

>如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下

#no-z-index {
      background:lightblue;
      width:100px;
      height:100px;
      position:relative;
    }
    #no-z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

>如果我这样做并设置父级的z-index,它就不再起作用了.

#z-index {
      background:lightblue;
      left:200px;
      width:100px;
      height:100px;
      position:relative;
      z-index:0; /* parent z-index */
    }
    #z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

这是预期的行为吗？

这是预期的行为,记录在 spec中.

如果未在生成元素上指定z-index(默认为auto),则生成元素和伪元素将出现在同一堆叠上下文中.这允许伪元素在其z-index较低时出现在元素下方.

当你在生成元素上指定z-index时,该元素为伪元素(实际上是它的所有后代)创建一个新的堆叠上下文,防止伪元素出现在它下面,即使你给它一个负z指数.