How to insert image in after and before property in css also handling it's sizing

Question

i don't know why my code is not working btw i want to add image in content of before property of css and i already done this but i don't know how i give size what i want because that image in it's actual size right now



li::after{

    content:" ";

    width: 70px;

    height: 70px;

    top: 10px;

    background-image: url("https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US");

    background-repeat:no-repeat ;

    background-size:70px 70px;

    border-radius:35px;

    position: absolute;

    border-top:2px solid #222;

    background:#222;

    justify-content:center;

}

i want to short this problem of sizing of image in content of before property

AngYC · Answer 1 · 2023-04-28T02:35:48.980

0

If what you need is to ensure the image always fit inside the box (70x70px), you can use background-size: cover CSS value to ensure the image always cover the full size (but with some parts of it cropped). In addition, if you want the image to always be center-aligned, you can use background-position: center CSS value instead of justify-content (which is used for Flex instead)

li::after {
  content: ' ';
  width: 70px;
  height: 70px;
  top: 10px;
  background-image: url('https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 35px;
  position: absolute;
  border-top: 2px solid #222;
}

li:hover::after {
  background-image: url('https://placekitten.com/200/200');
}

<ul>
  <li>Test</li>
</ul>

edited Apr 28 '23 at 02:35

answered Apr 28 '23 at 02:27

AngYC

3,051
6
20

great this is helpful btw do you know how i hover after or before property – Hritik gautam Apr 28 '23 at 02:31
Hi @Hritikgautam, you cannot give `:hover` effect to pseudo-element: https://stackoverflow.com/questions/8874326/how-to-make-a-hover-effect-for-pseudo-elements - However, you can add hover effect to its parent instead, modified my answer above to reflect that – AngYC Apr 28 '23 at 02:36
ohh great well i know that how i hover it's parents but I'm just checking that can i hover after or before property but it's ok if we can't do – Hritik gautam Apr 28 '23 at 02:40

score 0 · Answer 2 · answered Apr 28 '23 at 04:42

Your code is fine except you have put a background: #222 after setting the background-image. This overrides the background-image.

If you want to put a background-color as well then state this explitly (or put the background: #222 before the background-image setting).

<style>
  li::after {
    content: " ";
    width: 70px;
    height: 70px;
    top: 10px;
    background-image: url("https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US");
    background-repeat: no-repeat;
    background-size: 70px 70px;
    border-radius: 35px;
    position: absolute;
    border-top: 2px solid #222;
    background-color: #222;
    justify-content: center;
  }
</style>
<ul>
  <li>
  </li>
</ul>

How to insert image in after and before property in css also handling it's sizing

2 Answers2