Css 表上的伪元素？

我试图将伪元素应用于

，但结果表明它没有按预期工作。我不确定我是否遗漏了什么，或者这根本不可能

下面是一个JSFIDLE示例：

请注意，如果将

tr

的显示更改为

display:block，伪元素将显示，但它显示为块而不是表，我需要它

这是可能的还是我注定了

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

这应该可以…
只需设置
显示：内联块到TDs，并给它们一个宽度（~33%）。。。并从伪元素中删除
position:absolute

就是这样：

我认为不需要伪元素

我会说，有一个元素，而不是一个细胞，直接在一行中，是在要求痛苦。
不过，在目标行的每个单元格中都可以有一个伪元素。有了正确的css，就不会有明显的区别

示例：
要使用
：：在
之前和/或
：：在
伪元素之后，您必须将这些元素应用于
td
元素，但根据
tr
的
：hover
选择
td
元素：

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;
}​


但是，如果目标是“看起来很酷”，那么我建议调整
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;
}


当然，使用这种方法，您可以在
颜色
、
背景色
、
高度
、
字体大小
边框
（
-宽度
或
-颜色
）上使用过渡效果，并调整计时（以及放松）

要设置多个属性的动画，使用关键字
all
（而不是单个属性名称）更容易


考虑到我已经30多岁了，这些天我很难定义，甚至认不出“酷”；但我七岁的侄子向我保证，给
填充物设置动画看起来“没问题”。你可能需要咨询自己的孩子亲戚，以了解其他方法的可行性

你到底想用它来实现什么？只是想给表格行制造一个很酷的悬停效果。当您悬停行时，我希望使高度展开。或者我希望它至少看起来像它（我不想添加填充或更改高度，因为这样兄弟姐妹会受到影响）。我打算使用
：before
和
：after
使行的顶部和底部看起来更大。唯一的区别是使用before而不是after。。使用
display的好处是：表格是指它根据内容自动设置列的宽度。当然，我可以硬编码宽度，但我更喜欢它显示为一个表。这是不可能的，对吧？当然，但在你最初的小提琴中，你在哪里使用了
display:table
？：）啊，我的意思是说
display:table row，我相信这是表行的默认值（这是有意义的）。啊，好的，它是（），但是您的
tr:after
无法工作。。。我只能让它像上面那样工作，希望能有帮助…是的，我想。谢谢你的帮助！我不确定您是否理解我为什么需要伪元素。根据我对表格和css的经验，您想对行执行的任何操作都可以通过设置单元格样式来完成，而且通常更为一致。我在我的答案中添加了一个对您的JSFIDLE的更改，以显示我的意思。成功！我的意思是，我发现它看起来真的像垃圾，我可能不会用它，但它很管用！我的想法有些混乱：我希望我能为那些伪元素加入一些css3转换，使它们滑动到位，或者可能会褪色。我特别说过，我不想使用高度或填充来扩展高度，因为它会影响兄弟行。如果你将鼠标悬停在其中一行上，你会看到下面的几行往下跳，这不是很好。想法是在行的顶部使用
：before
；只需给它与行相同的背景，并扩展
：before
的高度，而不是实际的行。底部部分也一样，但使用
：after
。这样看来，这一行的高度似乎在扩大。因此，请清楚地解释您想要什么。因为我想我遗漏了一些东西，你想让行看起来像是在扩展而不是实际扩展？实际的行本身不应该扩展，这会让兄弟姐妹像你的例子中那样跳跃。我想要的是使行扩展，但不是占用空间，而是溢出它的同级。明白了吗？这是我想要的最终结果：。我必须承认，它看起来不是很好，我可能不会使用它（至少是为了这个目的），但它是有效的。你看到你的例子和我的有什么不同吗？
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;
}​

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;
}