Move CSS ::after element into element

Question

Hello everyone I was wondering how I get the ::after element from my <input> search field into the input field itself (https://i.stack.imgur.com/Gc1MU.png).

I've tried some things but at the end my result was to set the CSS style for the ::after element to margin-left: -25px;.

I am not sure if this is the best solution, especially because I am using a negative value for margin. Is there any better solution for this? Or is this the only way?

[I can't get `::after` to work with an `` at all](https://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field). Perhaps you should include a [mcve] showing what you have so far. — Quentin, Aug 23 '17 at 13:55

score 0 · Accepted Answer · edited Nov 06 '17 at 05:41

0

You can set it using position:

.parentElement {
    position: relative;
}

.childElement {
    position: absolute;
    top: 5px;
    right: -25px;
}

edited Nov 06 '17 at 05:41

Ehsan

12,655
3
25
44

answered Aug 23 '17 at 13:50

Super User

9,448
3
31
47

Thanks this is a better solution and was exactly what I was searching for. – TheKeymaster Aug 23 '17 at 14:29

Move CSS ::after element into element

1 Answers1