對圖像使用 :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>