largeur et hauteur ne semblent pas fonctionner: avant le pseudo-élément

Question

Ici est un violon.

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

et

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

Le '?' apparaît mais n'a clairement pas la taille 20ex. Pourquoi pas? Testé sous Firefox et Chrome.

Answer 1

Les pseudo-éléments :before et :after sont en réalité display: inline; par défaut. 

Changez la valeur d'affichage en inline-block à la place pour que la largeur et la hauteur prennent effet:

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

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

Answer 2

Les pseudo-éléments ::before et ::after sont placés en ligne par défaut, de sorte que width et height ne prendront effet.

Réglez-le sur display: inline-block et cela devrait fonctionner .

Answer 3

ajouter display:block;

démo

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

Answer 4

Je peux le faire fonctionner sans utiliser un pourcentage de largeur. Les pixels fonctionnent bien

visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;

Answer 5

Utilisez ceci si vous avez une image dans un conteneur ou CSS white-space: nowrap; propriété

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