伪元素选择器不起作用

时间:2016-07-04 01:37:33

标签: html css pseudo-element

我有一个能够缩放尺寸的动态元素,它的位置可以放在屏幕上的任何位置。我基本上试图创造一个"肘部"部分。

这是什么"肘部"需要是右上角的延伸臂...有趣的是,虽然我的位置和大小正确,但由于某种原因,伪元素没有显示在灰色的我调用...(见附加图像显示元素检查器突出显示正确大小和位置的元素,但不是相同的灰色)...

enter image description here

我在这里有一个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);
}

我似乎无法弄清楚我错过了什么?

任何人都知道我错过了什么?提前谢谢。

1 个答案:

答案 0 :(得分:2)

::after元素正在显示背景,您的问题是div[class^='elbow-']设置为overflow:hidden;,隐藏了伪元素。

只需删除overflow:hidden;

即可

JSFiddle Demo