html - 具有 :after 的占位符属性

Question

我有一些必填的输入字段，有些则不是。我想定位占位符属性，然后使用 :after 伪类在文本末尾添加一个星号，以将字段标记为必填。

下面我的目标是占位符和伪类之后。这工作正常，但我无法使用 .required 类来实现。

    ::-webkit-input-placeholder:after {
        content: '*';
        color: darkred;
        font-size: 1.5rem;
    }
    
    input.require > ::-webkit-input-placeholder:after {
       content: '*';
       color: darkred;
       font-size: 1.5rem;
     }

    <input type="text" class="require" placeholder="Last Name" id="last-name"/>

我有点不知道如何选择 require 类和 :after 伪类。任何帮助将不胜感激。

预先感谢您的帮助!

Answer 1

input.require::-webkit-input-placeholder:after {
   content: '*';
   color: darkred;
   font-size: 1.5rem;
}