Question

我正在尝试将伪元素应用于<tr>但事实证明它没有按预期工作。我不确定我是否遗漏了任何东西，或者只是根本不可能。

这是一个jsfiddle示例：http://jsfiddle.net/jDwCq/

请注意，如果将tr的显示更改为display: block;，则会显示伪元素，但它会显示为块而不是表格，我需要它。

有可能还是我注定了？

Answer 1

table tr:before{
position: relative; /* Needed for pseudo elem */
display: block; /*Uncomment me and see what happens*/
}

这应该有用......

Answer 2

只需将display: inline-block;设置为TD，然后给它们一个宽度（每个约33％）...并从伪元素中删除position: absolute。

就是这样：http://jsfiddle.net/jDwCq/6/

   table tr {
        /*position: relative; /* (REALLY NOT) Needed for pseudo elem */
        display: block; /*Uncomment me and see what happens*/
    }

    td {
        width: 32.9%; /* ADD THIS */
        display: inline-block; /* AND THIS */
    }

    table tr:after {
        /*position: absolute; REMOVE THIS TOO */
        top: 0px;
        left: 0px;
        display: block;
        content: '';
        text-indent: -99999px;
        background: red;
        height: 2px;
        /*width: 100%; NOT NEEDED */
    }

Answer 3

    tr:hover td{
      background: pink or whatever;
    }
tr:hover td:after{
  background: yellow;
}

我认为不需要伪元素。

我会说，直接在一行中有一个不是细胞的元素，就是要求痛苦。但是，您可以在目标行的每个单元格中始终具有伪元素。使用正确的CSS，将没有明显的差异。

示例：http://jsfiddle.net/jDwCq/7/

Answer 4

要使用::before和/或::after伪元素使行显得更大，您必须将这些元素应用于td元素，但请选择{{1} }元素基于td的<{1}}：

:hover

JS Fiddle demo

然而，如果目标是'看起来很酷¹'那么我建议调整tr元素本身的样式（因为这样它们可以被动画化），而不是而不是使用刚出现的伪元素：

td::before,
td::after {
    /* defines the default states/sizes */
    height: 0;
    display: block;
    content: '';
}

tr:hover td::before,
tr:hover td::after {
    /* adjusts attributes based on the parent tr's :hover event */
    height: 1em;
}

JS Fiddle demo

当然使用此方法，您可以在td，td { padding: 0; -moz-transition: padding 1s linear; -ms-transition: padding 1s linear; -o-transition: padding 1s linear; -webkit-transition: padding 1s linear; transition: padding 1s linear; } tr:hover td { padding: 1em 0; -moz-transition: padding 1s linear; -ms-transition: padding 1s linear; -o-transition: padding 1s linear; -webkit-transition: padding 1s linear; transition: padding 1s linear; }，color，background-color height（font-size或border），并调整时间（以及缓和）。

要为多个属性设置动画，使用关键字-width（而不是单个属性名称）会更容易。

鉴于我已经超过三十岁，我现在无法定义，甚至认识，'酷'这些日子;但是我七岁的侄子向我保证，-color的动画效果看起来还不错。或许，您可能需要咨询您自己的孩子亲戚，了解其他方法的酷感。

桌子上的伪元素？

4 个答案: