1
.upper-menu .search-form::after {
  content: url('../images/search.png');
  position: absolute;
  height: 10px;
  top: 5px;
  right: 22px;
}

I have pseudo-element that looks like this. I would like to change the size of the image by scaling it down 50% so that it works on high-res-screens as well. How can I do this?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Himmators
  • 14,278
  • 36
  • 132
  • 223

2 Answers2

1

also, you could set the content to empty string and use a background image. Just alternatively...

.upper-menu .search-form::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  background: #bada55 url("img_2x.png") no-repeat;
  background-size: contain;
  height: 10px;
  width: 10px;
  top: 5px;
  right: 22px;
}
Todd
  • 5,314
  • 3
  • 28
  • 45
0

You simply have to set the width and height property to 50%. This will scale it according to the browser window.

Good Luck!

Alessandro26
  • 19
  • 1
  • Actually it will scale relative to `.search-form`, not the browser window. – George Dec 03 '14 at 16:13
  • actually, it would scale to exactly the dimensions specified -- ie 10px. – Todd Dec 03 '14 at 16:25
  • actually, it won't. Y'all realize the question is about using a `url()` image in `content` of an `:after` pseudo element, right? If you can make that work, how about a demo snippet? – ashleedawg Sep 04 '22 at 12:34