Html 如何使用CSS显示元素超过其父元素大小的指示？

假设我有一个div

.parent

，其中包含另一个div

.child

。如果是，当

.child

超过

.parent

的宽度时，如何使用CSS显示指示（即图标）

我已经使用jQuery实现了我的目标（请参见下面的示例），但我正在寻找一个只使用CSS的解决方案，因为我正试图将jQuery的使用率保持在尽可能低的水平

注意：

.child

div具有动态宽度

另一个注意事项：我不喜欢编辑div的内容

var x=$（'.child'）.offset（）.left+$（'.child'）.width（）；
变量y=$（'.parent'）.offset（）.left+$（'.parent'）.width（）；
如果（x>y）{
var z=x-y；
$（“.child”）
.append（$（''）
.css（'左'，z-10）
.css（'位置'，'绝对'）
.css（'top'，$（'child'）.height（）/2-10）
.text（“>”）；
}

.parent{
位置：相对位置；
边框：1px实心#000；
高度：200px；
宽度：200px；
溢出：隐藏；
}
.孩子{
位置：绝对位置；
顶部：40px；
边框：1px纯红；
高度：100px；
宽度：400px；
}

一些文本

我读了你的问题和评论。我有个主意。 是的，我认为解决问题的最好方法是使用javascript

但我决定寻找替代品：）

这就是为什么我花了10分钟的时间在这个解决方案上

是的，它只适用于webkit浏览器。但这是可能的

.parent{
位置：相对位置；
边框：1px实心#000；
高度：200px；
宽度：200px；
溢出：自动；
}
.孩子{
位置：绝对位置；
顶部：40px；
边框：1px纯红；
高度：100px；
宽度：400px；
}
.parent1{
位置：相对位置；
边框：1px实心#000；
高度：200px；
宽度：200px；
溢出：自动；
}
.儿童1{
位置：绝对位置；
顶部：40px；
边框：1px纯红；
高度：400px；
宽度：100px；
}
：-webkit滚动条{
背景：透明；
}
：-webkit滚动条按钮：水平：结束{
边框顶部：8px实心透明；
边框底部：8px实心透明；
右边框：8px实心透明；
左边框：8px实心红色；
}
：-webkit滚动条按钮：垂直：结束{
左边框：8px实心透明；
边框底部：8px实心透明；
右边框：8px实心透明；
边框顶部：8px纯蓝色；
}

一些文本
一些文本

您希望显示的是滚动条以外的指示，大概是。@T.J.Crowder是的，我是。然而，这个指示不需要任何动作或任何东西（它不需要滚动），我已经删除了标记，因为你不是在寻找jQuery解决方案。CSS无法做到这一点，有一点类似的是文本溢出：省略号，你确实需要javascript（或js框架）@SoorajChandran:嗯，CSS中内置了一些有限的检查，例如

：选中复选框，您可以使用这些复选框设置旁边的样式。我一直在默默地希望有人会发布一个类似“你在寻找这个鲜为人知的伪类：x-y-z！”：-）的答案