对图像使用 :before 和 :after 伪元素

Question

我想知道您如何在::after伪元素中格式化 Content CSS？

我正在尝试使用一个h1标题，它的左右两侧都有小图像。

到目前为止我的代码：

HTML：

<h1>This Week's Photo Features</h1>

CSS：

h1 {
  text-align: center;
}

h1:before {
  content: ("images/NikonD100_40x30.jpg");
}

Answer 1

content属性可以接受使用以下格式的 url：

content: url("the url")

演示：

 h1 { text-align: center; } h1:before { content: url("https://picsum.photos/40/40"); } h1:after { content: url("https://picsum.photos/40/40"); }

 <h1>This Week's Photo Features</h1>

另一种选择是将图像设置为伪元素的背景：

演示：

 h1 { text-align: center; } h1:before, h1:after { display: inline-block; width: 40px; height: 40px; content: ''; } h1:before { background: url("https://picsum.photos/40/40"); } h1:after { background: url("https://picsum.photos/40/40"); }

 <h1>This Week's Photo Features</h1>

如果您使用图像作为背景，则可以通过在H1元素上使用多个背景来丢弃伪元素。

演示：

 h1 { height: 40px; padding: 0 40px; text-align: center; background: url("https://picsum.photos/40/40") left no-repeat, url("https://picsum.photos/40/40") right no-repeat; }

 <h1>This Week's Photo Features</h1>