CSS for image-before-bullet

Questions about XML that are not covered by the other forums should go here.
fjeneau
Posts: 13
Joined: Thu Sep 24, 2020 8:20 pm

CSS for image-before-bullet

Post by fjeneau »

Hi,

One of my clients would like to have an image show before the bullet of a listitem based on certain criteria. They are using oXygen 21.1.
image.png
image.png (1.52 KiB) Viewed 1745 times
Currently I'm accomplishing this in the CSS like:

Code: Select all

li[id]::before {
	content:url('images/book-brown.png')'     ';
	margin-left:-2em;
}
This only works with tags off though. Tags-on looks like:
image.png
image.png (3.62 KiB) Viewed 1745 times

Is there a better way to do this that also works with tags-on?
alex_jitianu
Posts: 1007
Joined: Wed Nov 16, 2005 11:11 am

Re: CSS for image-before-bullet

Post by alex_jitianu »

Hi,

You could try positive paddings instead:

Code: Select all

li {
    padding-left: 25px;
}

li[id] {
	content:url('images/book-brown.png');
	padding-left:0em;
}
The layout is not ideal when tags are displayed, but there is no overlapping.

Best regards,
Alex
fjeneau
Posts: 13
Joined: Thu Sep 24, 2020 8:20 pm

Re: CSS for image-before-bullet

Post by fjeneau »

That produces a result like:
image.png
image.png (3.52 KiB) Viewed 1587 times
I need the image to appear before the disc. (I do understand that my version was faking it using the negative margin) If there's no other way, I'll probably need to use list-style-image with multiple images - images of book+bullet-style and images of empty space+bullet-style for 4 or 5 levels of unordered lists.
julien_lacour
Posts: 481
Joined: Wed Oct 16, 2019 3:47 pm

Re: CSS for image-before-bullet

Post by julien_lacour »

Hello,

For your case I think the best solution is to use the ::marker pseudo-element:

Code: Select all

li[id]::marker {
    content: url('images/book-brown.png');
}
But as you suggest you will need to use custom images having both bullet and book.
You can also try the list-style-image but I'm not sure it will do the trick.

Regards,
Julien
fjeneau
Posts: 13
Joined: Thu Sep 24, 2020 8:20 pm

Re: CSS for image-before-bullet

Post by fjeneau »

It looks like :marker is not supported in oXygen 21.1, so I'll have to go with list-style-image.

Thanks for the responses.
julien_lacour
Posts: 481
Joined: Wed Oct 16, 2019 3:47 pm

Re: CSS for image-before-bullet

Post by julien_lacour »

Hello,

Unfortunately Oxygen 21.1 has reached its out of maintenance period which means that no new build will be deployed on this version.
You could perhaps upgrade to version 23.1 (current version) in order to continue using Oxygen in the best conditions.
In this version you can use the ::marker on list-items in Author Mode without any issues.

Regards,
Julien
Post Reply