伪元素选择器不起作用

Question

我有一个能够缩放大小的动态元素，它的位置可以放在屏幕上的任何位置。我基本上是在尝试创建一个 "elbow" 部分。

这个 "elbow" 需要的是右上角的延伸臂...有趣的是，虽然我的位置和大小正确，但由于某种原因，伪元素没有出现在灰色我正在调用...（见附图，显示元素检查器以正确的大小和位置突出显示元素，但不是相同的灰色）...

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

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

有人知道我错过了什么吗？提前致谢。

Answer 1

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

只需删除 overflow:hidden;

JSFiddle Demo

伪元素选择器不起作用

Pseudo element selector not working

html

css

pseudo-element