Pseudo ‘after’ element not showing, despite relative and z-indexes

Asked Jun 04 '19 at 15:55

Active Jun 04 '19 at 16:00

Viewed 21 times

I know there’s some other posts out there which usually state things like ensure the parent is relative, add a z-index, etc - but none have worked. The element in question is the search button on this page:

https://notts-laod.verseonecloud.com/search

Any ideas? I just want to know where the pseudo element actually is, so I can then put a search icon over the button. Thanks for any help here. The specific code is:

.submit-wrap input {
  padding: 12px;
  border: 1px solid #7A689C;
  position: relative;
}

.submit-wrap input:after {
  position: absolute;
  padding-left: 5px;
  font-family: 'Font Awesome 5 Pro';
  content: '\f002';
  font-size: 0.75em;
  right: 0;
  top: 0;
  color: red;
  width: 100%;
  height: 100%;
  background: green;
  content: 'test';
}

<span class="submit-wrap">
<input name="search" type="submit">
</span>

edited Jun 04 '19 at 16:00

Akshay

14,138
5
46
70

asked Jun 04 '19 at 15:55

user8758206

2,106
4
22
45

1

Where is your html? – Flavio Caruso Jun 04 '19 at 15:57
on the site, it's the part I've just added into the post – user8758206 Jun 04 '19 at 15:59
I see a magnifying glass icon on the page you linked to. Isn't that what you want? – j08691 Jun 04 '19 at 16:01
1

I believe `input` elements can't have pseudo elements – Akshay Jun 04 '19 at 16:02
it's the large search field under 'Search the Learning and Organisational Development website' – user8758206 Jun 04 '19 at 16:06
yes, not sure why that magnifying glass works on the first input but not the input for the large search box – user8758206 Jun 04 '19 at 16:07
any ideas anyone? still can't get it to work. And input elements can have pseudo elements as the other input element on the same page has a pseudo element that renders the search icon – user8758206 Jun 06 '19 at 11:50

Pseudo ‘after’ element not showing, despite relative and z-indexes

0 Answers0