CSS: Псевдоэлементы: до и: после наследования ширины/высоты от исходного элемента

Я использую псевдо-элементы css: before и: after, чтобы дать эффект отступа для некоторых моих изображений на веб-сайте. Однако без указания ширины и высоты они не будут отображаться. Это позволило бы мне указать фиксированную ширину и высоту для каждого изображения, которое, как я полагаю, будет работать для статической веб-страницы.

Однако, поскольку эти изображения генерируются динамически с помощью jQuery и представлены пользователем, изображения каждый раз различаются по ширине и высоте. Теперь я мог бы, вероятно, исправить это с помощью Javascript, получив ширину от изображения и передав ее в: раньше, но похоже, что это слишком много работает для чего-то подобного.

Мой вопрос в том, есть ли способ сделать это только с помощью CSS, чтобы иметь ширину, содержащую изображение, передаваемое в: before на этом <li> так что: before и: after псевдоэлементы наследуют ширину и высоту исходного элемента.

Основной макет страницы:

<ul>
   <li>
       <img src="foo" />
   </li>   
</ul>    

# css style simplefied
ul{ float:left; list-style:none}
li{float:left;}
li img{float:left}
li:before{
          content:"":
          position:relative;
          position:absolute;
          float:left;   
          box-shadow:0 1px 2px rgba(0,0,0,0.4);   

}

PS: требуется совместимость только для мобильных браузеров Webkit.

ИЗМЕНИТЬ

Я мог бы, например, добавить строки в CSS с помощью Javascript, используя следующие строки:

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';    
document.styleSheets[1].insertRule('ul li:before { height: ' +  heightImg+ '; }', 0);

Но это будет означать, что мне также придется работать с динамическими идентификаторами. Который будет не сложно, но мне просто интересно, нет ли способа только CSS.

Ответ 1

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

Ответ 2

li{
    float:left;
    position:relative;
}
li img{
    float:left;
}
li:before{
    content:" ":
    position:absolute;
    width:100%;
    height:100%
    box-shadow:0 1px 2px rgba(0,0,0,0.4);
}

Ответ 3

кажется, что content:" ": важно вместе с display: block

Ответ 4

Try:

ul {
    position: relative;
}
li:before {
    content: '\00a0';
    display: block;
    float: left;
    position: absolute;
    height: 100%;
}

Это сработало для меня.

Ответ 5

position: -ms-page исправил проблему для меня