我有一个能够缩放尺寸的动态元素,它的位置可以放在屏幕上的任何位置。我基本上试图创造一个"肘部"部分。
这是什么"肘部"需要是右上角的延伸臂...有趣的是,虽然我的位置和大小正确,但由于某种原因,伪元素没有显示在灰色的我调用...(见附加图像显示元素检查器突出显示正确大小和位置的元素,但不是相同的灰色)...
我在这里有一个JSFiddle代码:https://jsfiddle.net/eliseo_d/6p9z8xr3/
HTML:
<div class="elbow-1-toprt-wide0-grey1">elbow 1</div>
CSS:
html {
background-color: rgb(0,0,0);
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102,102,102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0,0,0);
font-size: 14pt;
height: 14px;
margin-bottom: 4px;
margin-right: 4px;
overflow: hidden;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
text-align: right;
text-transform: uppercase;
width: 84px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
/* Initial curve */
div[class^='elbow-'][class*='-toprt-'] {
border-top-left-radius: 42px;
}
/* elbow bar */
div[class^='elbow-'][class*='-toprt-']:after {
content: '';
height: 30px;
left: 104px;
top: 0;
position: absolute;
}
div[class^='elbow-'][class*='-wide0-']:after {
width: 21px;
}
div[class^='elbow-'][class*='-wide0-'][class$='-grey0']:after {
background-color: rgb(51,51,51);
}
div[class^='elbow-'][class*='-wide0-'][class$='-grey1']:after {
background-color: rgb(102,102,102);
}
我似乎无法弄清楚我错过了什么?
任何人都知道我错过了什么?提前谢谢。
答案 0 :(得分:2)
::after
元素正在显示背景,您的问题是div[class^='elbow-']
设置为overflow:hidden;
,隐藏了伪元素。
只需删除overflow:hidden;