将 :之前和 :之后的伪元素与图像一起使用

Question

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

我正在尝试有一个h1标题，其左侧和右侧都有小图像。

到目前为止我的代码：

.HTML：

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

.CSS：

h1 {
text-align: center;
}
h1:before {
content: ("images/NikonD100_40x30.jpg");
}

Answer 1

内容属性可以接受使用以下格式的 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>