Using :before and :after pseudo-elements with images

Question

I'm wondering how you format the Content CSS in a ::after pseudo-element?

I'm trying to have an h1 heading that has small images to the left and right of it.

My code so far:

HTML:

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

CSS:

h1 {
  text-align: center;
}

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

Answer 1

the content property can accept a url using this format:

content: url("the url")

Demo:

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>

Another option is to set the images as background of the pseudo elements:

Demo:

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>

And if you use the images as backgrounds, you can ditch the pseudo elements by using multiple backgrounds on the H1 element.

Demo:

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>