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");
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.