Можете ли вы применить ширину к a: before /: после псевдоэлемента (контент: url (изображение))?

Question

Это в дополнение к моему недавнему вопросу: Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)?

JSFiddle: http://jsfiddle.net/derekmx271/T7A7M/

Я пытаюсь использовать псевдо-элементы в «clearfix» абсолютно позиционированные изображения. Я дошел до того, что один и тот же образ отображался за слайдами, но не может использовать ширину для вставленного изображения. Я с ума сошел, или вы не можете применять ширину к псевдо элементам, содержимое которых является контентом: url (img/image.jpg)? Я попробовал различные варианты отображения: блок, и т.д. но безрезультатно ...

#slider ul:after { 
    content: url(http://www.cs7tutorials.com/img/slide1.jpg); 
    display: block; 
    position:relative; 
    width:70px; 
} 

мне нужно установить ширину псевдо-элемент изображения до 100% и максимальной ширины в 800px, так что она имеет те же размеры, что и мои слайды.

Answer 1

Вы не сумасшедшие: это действительно невозможно изменить размеры изображения, который вводится с помощью content. Изображение всегда отображается как есть. Это называется замененным содержимым, или replaced element (за исключением того, что мы здесь не говорим об элементах).

Однако, поскольку замещаемых элементов может быть изменен с помощью width и height, как описано в section 10 of the CSS2.1 spec, возникает вопрос о том, почему свойства, кажется, не применяются здесь. Ответ на этот вопрос, похоже, заключается в том, что свойства действительно применяются, но в поле псевдоэлемента - вы можете увидеть это, указав свой псевдоэлемент на цвет фона. Вместо замены самого элемента псевдоэлемента изображение отображается как дочерний элемент в поле псевдоэлемента, поэтому его вообще нельзя стилизовать (так как для этого потребуется другой псевдоэлемент, которого не существует).

И это поддается другому вопросу: почему он вообще не заменяет блок псевдоэлементов? К сожалению, CSS2.1 не определяет такое поведение вообще, так the implementation that was agreed on is to render the content as a child of the pseudo-element box instead:

CSS2.1 не очень четко определить модель обработки «содержание» на :: до и после ::, но информативный примеры в CSS 2.1, тот факт, что «content» указывает список , и желание согласованности привело к тому, что поведение UA было следующим: свойство content содержит список вещей, которые становятся дочерними элементами :: перед или: после коробки.

-Boris

Надеемся, что это будет в дальнейшем рассматриваться в CSS Generated Content 3-го уровня, на котором перезапись работа только началась.

В то же время, если вы хотите изменить размер псевдоэлемента и созданного ими изображения, вам нужно будет применить его как фоновое изображение, а также - при условии, что поддержка браузера не является проблемой - используйте background-size, а также width и height для его масштабирования (исходя из понимания того, что эти свойства применимы к полем псевдоэлементов).

Answer 2

Посмотрите демо с помощью background-image: http://jsfiddle.net/T7A7M/12/