93

Here is a fiddle.

<p>foo <a class="infolink" href="#">bar</a> baz</p>

and

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
}

The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.

8 Answers 8

176

Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.

Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

http://jsfiddle.net/C7rSa/3/

4
  • Nice solution..but This does not work when the content has a base64 image string...tested on firefox 45.3
    – repzero
    Dec 2, 2016 at 3:24
  • have you succeed with base64 images?
    – CodingWeb
    Jun 12, 2019 at 19:59
  • 1
    @Webwoman: Please be more specific -- if you're referring to controlling the image size through width / height then that's not the way it's supposed to work. Those attributes only control the sizing on the pseudo-element itself, not its content.
    – Adrift
    Jun 15, 2019 at 14:06
  • i keep forgetting that fact and always seem to come back here every now and then ;)
    – dance2die
    Sep 15, 2021 at 2:11
17

::before and ::after pseudo-elements are laid inline by default, so width and height won't take effect.

Set it to display: inline-block and it should work.

5

Use this if you have image in container or CSS white-space: nowrap; property

body::before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
}
4

If you set the element to position: relative and the pseudo to position: absolute, you can adjust the pseudo width and height in relation to the parent element size.

div {
    position: relative;
    width:400px;
    height:200px;
    padding: 0;
}

 div::before {
    position: absolute;
    width:100%;
    height: 100%
}
3

For me it worked when I used display: block.

1

add display:block;

demo

p > a.infolink::before {
    display:block;
    content:'?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
    border:1px solid #000;
}
1

I can get it to work but not using a percentage in width. Pixels work fine

visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;
1
  • That's usually because you haven't set a width on the element creating the pseudo-element. Percentages aren't any different in this case.
    – BoltClock
    Apr 17, 2015 at 5:47
0

I know this doesn't answer the question fully, but the only solution that worked for me was using the font-size property.

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    font-size: 20ex;
}
<p>foo <a class="infolink" href="#">bar</a> baz</p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.