Can I change the height of an image in CSS before after pseudo-elements

Question

Suppose I want to decorate links to certain file types using an image   I could declare my links as   lt a href  foo pdf  class  pdflink  gt A File  lt  a gt    then have CSS like   pdflink after   content  url   images pdf png       Now  this works great  except if pdf png isn t the right size for my link text   I d like to be able to tell the browser to scale the  after image  but I can t for the life of me find the right syntax   Or is this like background images  where resizing just isn t possible   ETA  I m leaning towards either a  resizing the source image to be the  right  size  server-side and or b  changing the markup to simply supply an IMG tag inline   I was trying to avoid both those things but they sound like they ll be more compatible than trying to do stuff purely with CSS   The answer to my original question seems to be  you can sort of do it  sometimes

User · Accepted Answer

Adjusting the background-size is permitted  You still need to specify width and height of the block  however    pdflink after       background-image  url   images pdf png        background-size  10px 20px      display  inline-block      width  10px       height  20px      content         See the full Compatibility Table at the MDN

User · Answer

Note that the  after pseudo-element is a box  which in turn contains the generated image  There is no way to style the image  but you can style the box   The following is just an idea  and the solution above is more practical     pdflink after       content  url   images pdf png        transform  scale  5       http   jsfiddle net Nwupm   Drawbacks  you need to know the intrinsic dimensions of the image  and it leaves you with some whitespace  which I can t get rid of ATM

User · Answer

You can use the zoom property  Check this jsfiddle

User · Answer

Instead of setting the width and height of the background image  you can set width and the height of the element itself   pdflink  after     content        background-image  url  images pdf png     width  100px    height  100px    background-size  contain

User · Answer

You should use background instead of image    pdflink after     content        background-image url your-image-url png     background-size  100  100     display  inline-block       size of your image     height  25px    width 25px       if you want to change the position you can use margins or      position relative    top 5px

User · Answer

You can change the height or width of the Before or After element like this    element after     display  block    content  url  your-image png      height  50px    add any value you need for height or width   width  50px

User · Answer

Since my other answer was obviously not well understood  here s a second attempt   There s two approaches to answer the question   Practical  just show me the goddamn picture    Forget about the  after pseudo-selector  and go for something like   pdflink       min-height  20px      padding-right  10px      background-position  right bottom      background-size  10px 20px      background-repeat  no-repeat      Theoretical  The question is  Can you style generated content  The answer is  No  you can t  There s been a lengthy discussion on the W3C mailing list on this issue  but no solution so far   Generated content is rendered into a generated box  and you can style that box  but not the content as such  Different browsers show very different behaviour    foo          content  url  bar jpg    width  42px  height 42px      foo  before  content  url  bar jpg    width  42px  height 42px         Chrome resizes the first one  but uses the intrinsic dimensions of the image   for the second      firefox and ie don t support the first  and use intrinsic dimensions for the   second      opera uses intrinsic dimensions for both cases    from http   lists w3 org Archives Public www-style 2011Nov 0451 html    Similarly  browsers show very different results on things like http   jsfiddle net Nwupm 1    where more than one element is generated  Keep in mind that CSS3 is still in early development stage  and this issue has yet to be solved

User · Answer

diplay  block  have no any effect  positionin also works very strange accodringly to frontend foundamentals  so be careful  body before       content url https   i imgur com LJvMTyw png       transform  scale  3       position  fixed      left  50       top  -6       background  white

User · Answer

I used this font size control width   home footer1  after   color  transparent  background-image  url  images icon-mail png          background-size  100         content                                             font-size  30pt

User · Answer

pdflink after       background-image  url   images pdf png        background-size  10px 20px      width  10px       height  20px      padding-left  10px    equal to width of image      margin-left 5px    to add some space for better look     content

User · Answer

content      background-image  url  yourimage jpg    background-size  30px  30px

User · Answer

Yes  the original question was asked eight years ago  but it s actually relevant today as its always been  Now  I ve been going from pillar to post over this issue of   before  for about a week   after  and its been driving me round the bend  From this page  and others on the subject - I ve finally put it together and sized an image down in the pseudo tag     Running note  colnav is just my container class  that holds an  lt  UL  gt  and  lt  LI  gt  set of tags with a set of  lt  a hrefs inside  Below is the code  complete    colnav li nexus-button a hover before          background-image  url   images fleur-de-lis png        background-size  90px 20px      background-repeat  no-repeat      width  130px      height  20px      margin-left  -120px      margin-top  -3px      transform  scale 1 5       content   quot  quot       position  absolute      The image file was  is  120 x 80  and the picture got reduced right down to 90x 20  where it then fitted quite nicely behind the html href tag  and it all came together with that position  absolute statement at the end

User · Answer

Here is another  working  solution   just resize your images to the size you want      pdflink after       display  block      width  20px      height  10px      content url   images pdf png        you need pdf png to be 20px   10px for this to work  The 20px 10px in the css are here to give the size of the block so that the elements that come after the block are not all messed up with the image  Don t forget to keep a copy of the raw image in its original size

User · Answer

Nowadays with flexbox you can greatly simplify your code and only adjust 1 parameter as needed    pdflink after       content  url   images pdf png        display  inline-flex      width  10px      Now you can just adjust the width of the element and the height will automatically adjust  increase decrease the width until the height of the element is at the number you need

[css] Can I change the height of an image in CSS :before/:after pseudo-elements?

Examples related to css

Examples related to pseudo-element