Placeholder Attribute with :after

Question

I have input fields that are required and some that aren't. I'd like to target the placeholder attribute and then use the :after pseudo class to add an asterisk to the end of the text to label the field as being required.

Below I'm targeting the placeholder and after pseudo class. This works fine but I'm not able to implement with a .required class.

    ::-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"/>

I'm a bit lost as to how I would select both the require class and :after pseudo class. Any help would be much appreciated.

Thanks in advance for your help!

Answer 1

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