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

Это в дополнение к моему недавнему вопросу: Можно ли использовать псевдоэлементы, чтобы элементы, содержащие элементы, обтекали абсолютно позиционированный элемент (например, 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% и максимальную ширину до 800 пикселей, чтобы он имел те же размеры, что и мои слайды.

Ответы

Ответ 1

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

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

И это поддается другому вопросу: почему он вообще не заменяет блок псевдоэлементов? К сожалению, CSS2.1 вообще не указывает этого поведения, поэтому реализация, которая была согласована, заключается в том, чтобы отобразить содержимое как дочерний элемент псевдоэлементного поля:

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

-Boris

Надеемся, что это будет рассмотрено на уровне CSS 3, на котором начата переписывающая работа.

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