Ширина и высота не работают: перед псевдоэлементом

Здесь - скрипка.

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

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

"?" но явно не имеет размера 20ex. Почему нет? Протестировано в Firefox и Chrome.

Ответ 1

Примечание: ::before и ::after псевдо-элементы фактически заложены display: inline; по умолчанию.

Измените отображаемое значение на inline-block чтобы ширина и высота вступили в силу при сохранении контекста встроенного форматирования.

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

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

Ответ 2

::before и ::after по умолчанию строятся псевдоэлементы, поэтому width и height не вступят в силу.

Установите значение display: inline-block и он должен работать.

Ответ 3

добавить display:block;

демо

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

Ответ 4

Я могу заставить его работать, но не используя процент по ширине. Пиксели прекрасно работают

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

Ответ 5

Используйте это, если у вас есть изображение в контейнере или пустое пространство CSS : nowrap; имущество

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