I am trying to add an image separator between <section>s and rather than my usual non-semantic way of adding a paragraph with an image, I wanted to try a better way. I have
section::after {
content: url('../images/h-line.jpg');
}
which is fine as far as it goes, but I want the image centred on the page. I’ve tried margin: 0 auto and text-align: center without success but I’ve run out of ideas.
That should work, but make the pseudo element display: block first.
Though I think a background image may be a better way to go.
Thanks Sam. I thought I’d set display block but clearly not. I’ll have a look at using as a background image…
The reason I say that is, I’m not sure how you then make the image responsive.
The image being the content of the pseudo element and not the element itself, you don’t have control over it via the css selector, whereas a background image you can control.
Though this may depend on the size and nature of the image and how you wish it to behave at varying sizes.
I almost asked why! 
As it is the image is small enough not to need resizing. It should - I’ve not tested it yet - even fit my iPhone 4S.
It should be OK then. But in my example I used a wide horizontal bar so it has to respond the screen width.
I don’t know of a way to select the image content of a pseudo element.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.