表内的伪元素

Question

我想在 table-row 之前插入伪元素 ::。 为了摆脱流程，我使用绝对定位。 但是我得到了一些意想不到的结果。

如果我将它应用于所有tr元素，它可以正常工作。 但是在第二个例子 table.two 中，它并没有像那样工作。我无法从流程中获取伪元素。

唯一的区别是我定位子集。

我没有特别的设计。我只想更灵活地设置表格行的样式。 也许有一些奇特的盒子阴影？

＆＃13;

＆＃13;

VarType

＆＃13;

table {
    	border: 1px solid black;
    	width: 300px;
    }
    td {	width: 33%; }
    
    /*  lets go */
    tr {
    	position: relative; /*  reference point for pseudo elements */
    }
    tr.two::before, table.two tr::before {
    	content: "test";
    	color: red; background: rgba(255,200,0,0.7);
    	position: absolute; top: 5%; left: 5%; bottom: 5%; right: 5%;
        z-index: -1;
        box-shadow: -1em 0 0.2em 0 rgba(255,200,0,0.4), 1em 0 0.2em 0 rgba(255,200,0,0.4);

    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是你将伪元素相对于tr定位导致了未定义的行为：

  

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table的影响-caption元素未定义。

（http://www.w3.org/TR/CSS2/visuren.html#propdef-position）。

完全赞同此答案https://stackoverflow.com/a/8502084/3400962，以便找到答案。

这意味着您无法通过相对于tr添加和定位伪元素来获得所需的结果。

要实现您所追求的效果，您可以添加并相对地将多个伪元素定位到td。伪选择器first-child和last-child可用于确保box-shadow仅适用于tr的末尾。

table {
  border: 1px solid black;
  border-spacing: 0;
  width: 300px;
}
td {
  position: relative;
  width: 33%;
}
tr.two td::before,
table.two tr td::before {
  background: rgba(255, 200, 0, 0.7);
  bottom: 5%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 5%;
  z-index: -1;
}
tr.two td:first-child::before,
table.two tr td:first-child::before {
  box-shadow: -1em 0 0.2em 0 rgba(255, 200, 0, 0.4);
  color: red;
  content: "test";
  left: 5%;
}
tr.two td:last-child::before,
table.two tr td:last-child::before {
  box-shadow: 1em 0 0.2em 0 rgba(255, 200, 0, 0.4);
  right: 5%;
}

<table>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr class="two">
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
</table>

Answer 2

你的问题不在于定位，但是只有在整个表中存在具有此伪元素的行时才会发生这种情况，dunno为什么是O_o，但它与tr拉伸有关，所以

＆＃13;

＆＃13;

table {
    	border: 1px solid black;
    	width: 300px;
    }
    td {
    	width: 33%; }
    
    /*  lets go */
    tr {
    	position: relative; /*  reference point for pseudo elements */
    }
    table tr.two td, table.two tr td{
        width:25%;
    }
    tr.two::before, table.two tr::before {
    	content: "test";
    	color: red; background: rgba(255,255,255,0.7);
    	position: absolute;
    }

＆＃13;

<table>
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr class="two">
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>
    
    <table class="two">
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;