Slayther Slayther - 1 year ago 44
CSS Question

CSS ::after background not displaying

I'm trying to make a tick image display after div element. I tried several combinations of CSS properties, but I just can't seem to figure out how to do it properly.

Answers to similar questions didn't help me.

HTML:

<div class="link-input-container">
<input class="link-input" placeholder="Zalijepi link ovdje..." type="text" class="url_input" name="url_input">
</div>


CSS:

.link-input {
font-family: Courier New;
font-size: 12px;
}

.link-input-container::after {
display: block;
content: "";
width: 12px;
height: 12px;
background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
}


Fiddle: http://jsfiddle.net/mk3fauk5/

Answer Source

it was showing the background, the problem was that the size of the background was so big that you'd only see the empty space of it, give your background a size and a position and it'll work: DEMO

.link-input-container::after {
  display: block;
  content: "";
  width: 64px;
  height: 64px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
  background-size:contain;
  background-position:center;
}