[英]Using :before and :after pseudo-elements with images
I'm wondering how you format the Content CSS in a ::after
pseudo-element?我想知道您如何在::after
伪元素中格式化 Content CSS?
I'm trying to have an h1
heading that has small images to the left and right of it.我正在尝试使用一个h1
标题,它的左右两侧都有小图像。
My code so far:到目前为止我的代码:
HTML: HTML:
<h1>This Week's Photo Features</h1>
CSS: CSS:
h1 {
text-align: center;
}
h1:before {
content: ("images/NikonD100_40x30.jpg");
}
the content property can accept a url using this format: content属性可以接受使用以下格式的 url:
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.如果您使用图像作为背景,则可以通过在H1
元素上使用多个背景来丢弃伪元素。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.