Html 在CSS:height:height+；50像素？

我需要在

：hover

上增加div

+50px

的

高度（这不是预先定义的）


.foo{
背景：红色；
宽度：50%；
文本对齐：居中；
}
.foo:悬停{
高度：高度+50px；
颜色：白色；
}
foo text
如果您的身高变量如下：

@foo高度：50px；/*这是您的初始高度值*/

您可以在.less文件中写入以下规则：

.foo{
背景：红色；
宽度：50%；
高度：@foo高度；
文本对齐：居中；
}
.foo:悬停{
高度：~'calc（{foo height}+50px）'；
颜色：白色；
}
如果您的身高变量如下：

@foo高度：50px；/*这是您的初始高度值*/

您可以在.less文件中写入以下规则：

.foo{
背景：红色；
宽度：50%；
高度：@foo高度；
文本对齐：居中；
}
.foo:悬停{
高度：~'calc（{foo height}+50px）'；
颜色：白色；
}
 > p>也许你可以考虑使用伪元素：


也许你可以考虑使用伪元素：

使用额外的html元素和一些abs/rel定位：


使用额外的html元素和一些abs/rel定位：


我的评论如下：我建议另一种方法。只需将长方体阴影设置为容器元素，如下所示：


a{
文本缩进：-9999px；
溢出：隐藏；
背景：url（'http://nationalevents.cityofhope.org/images/content/pagebuilder/facebook-icon.png');
背景尺寸：封面；
宽度：32px；
高度：32px；
显示：块；
/*边框：1px纯白*/
框大小：边框框；
边界半径：50%；
}
a:悬停{
盒影：0 2px 3px rgba（0,0,0,0.3）；
}
在我的评论之后：我建议另一种方法。只需将长方体阴影设置为容器元素，如下所示：


a{
文本缩进：-9999px；
溢出：隐藏；
背景：url（'http://nationalevents.cityofhope.org/images/content/pagebuilder/facebook-icon.png');
背景尺寸：封面；
宽度：32px；
高度：32px；
显示：块；
/*边框：1px纯白*/
框大小：边框框；
边界半径：50%；
}
a:悬停{
盒影：0 2px 3px rgba（0,0,0,0.3）；
}
使用纯css是不可能的，但您可以使用较少的css或JavaScription来实现它。我如何使用较少的css来实现它？@Serge实际上我可能有解决方案，但我想知道，您为什么要实现这一点。是为了适应更多的内容还是仅仅为了外观或效果。@divy3993:我用实用的细节更新了OP…类似这样的东西：纯css是不可能的，但你可以用更少的css或者Javascript来实现它。我怎么能用更少的脚本来实现呢？@Serge实际上我可能有解决方案，但我想知道，你为什么要实现这一点。是为了适应更多的内容，还是仅仅为了外观或效果。@divy3993:我用实用的细节更新了OP…类似这样的东西：不，那样是不可能的。你可以像我在这里展示的那样，用预定义的高度来完成。否则你会使用javascriptno，那是不可能的。你可以像我在这里展示的那样，用预定义的高度来完成。否则你会使用javascriptI，我需要增加高度，而不是将其设置为50px。。。尝试设置
.foo{height:100px；}
正如您所见，我不会直接触摸您宝贵的
.foo
的高度。我正在设置
：：在
伪元素之后的高度。请阅读。@Serge这确实增加了高度，它基本上是在文本下添加另一个元素，高度为
50px
，因此它实际上是文本高度+伪元素高度。我理解，但我需要增加高度，而不是将其设置为50px。。。如果一瞬间的高度是100px，它应该变成150px。。。如果为50%，则应为50%+50px。看小提琴@Serge小提琴的不同之处在于，你在
.foo
上设置了
高度
，这将打破这种特殊方法。您在问题和评论中建议未指定
高度
，因此这会有问题吗？我需要增加高度，而不是将其设置为50px。。。尝试设置
.foo{height:100px；}
正如您所见，我不会直接触摸您宝贵的
.foo
的高度。我正在设置
：：在
伪元素之后的高度。请阅读。@Serge这确实增加了高度，它基本上是在文本下添加另一个元素，高度为
50px
，因此它实际上是文本高度+伪元素高度。我理解，但我需要增加高度，而不是将其设置为50px。。。如果一瞬间的高度是100px，它应该变成150px。。。如果为50%，则应为50%+50px。看小提琴@Serge小提琴的不同之处在于，你在
.foo
上设置了
高度
，这将打破这种特殊方法。您在问题和评论中建议未指定
高度
，因此这会是一个问题吗？
.foo{
  background: red;
  width: 50%;
  text-align: center;
}

.foo:hover{
  color: white;
}

.foo:hover::after {
    content: '';
    display: block;
    height: 50px;
}

<div class="foo">
    <div class="inner-helper">foo text</div>
</div>

.foo {
    position: relative;
}
.foo .inner-helper {
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
}
.foo:hover .inner-helper {
    bottom: -50px;
}