如何组合输入：after:focus纯css？

我有一个输入字段，需要在焦点上有特定的梯度边界。所以，我在块上创建了这种边框作为背景色，在：after元素上创建了更小的背景色。 它在简单块上工作，但在：聚焦上不工作

.test:focus:after

和

测试：after:focus

不工作

有什么解决办法吗

这是一个例子，看看我在说什么

---

谢谢大家!

对于不能包含HTML内容的元素，您不能这样做。看

一种方法是添加一个可以包含HTML内容的元素，比如

span

，然后在

伪元素之后应用
：（或者在CSS 2.1中，在
伪选择器之后应用
）


一个通用示例：

HTML:
↪ 

↪  
 我意识到这是一个古老的问题，但我在寻找自己的问题时发现了这个问题，列出的解决方案对我不起作用，尽管它确实让我走上了工作的轨道

我使用的解决方案类似，但有点不同

HTML

<span class="after-holder"><input type="text" class="edit long" /></span>

当焦点出现在输入字段中时，它对我有效

.date-of-birth:focus-within::after {
  position: absolute;
  color: #b5d0ee;
  font-weight: 600;
  left: 40%;
  top: 14px;
  content: attr(placeholder);
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

您不能将：focus应用于伪元素，因为它不是DOM元素。您甚至不能将
:after
应用于
input
元素，因为这些元素没有内容。（它可能在某些浏览器中工作，但最有可能不是在所有浏览器中都工作。）可能的重复嗯，您可以将两个类分配给textarea，将focus伪元素设置为一个，将focus伪元素设置为另一个。非常感谢你的回答。我知道这并不容易。我将尝试这里写的所有示例。很酷的黑客，但我想知道是否有办法获得焦点元素的属性。我试图在{content:attr（占位符）}
@Max之后执行
input:focus:：focus:：我认为没有办法做到这一点
attr
专门获取选择器应用到的元素的属性，或者在伪元素的情况下，例如
：：在
伪元素的原始元素之后。这是一个很好的解决方案，但请注意，它不完全受支持，尽管如果您不需要Edge/IE，它相当不错。不过对我来说很有用！
<span class="after-holder"><input type="text" class="edit long" /></span>

.after-holder:focus-within::after {
        content: 'content';
    }

.date-of-birth:focus-within::after {
  position: absolute;
  color: #b5d0ee;
  font-weight: 600;
  left: 40%;
  top: 14px;
  content: attr(placeholder);
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}