CSS for image-before-bullet

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

CSS for image-before-bullet

Post by fjeneau » Wed Jul 14, 2021 12:37 am

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 472 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 472 times

Is there a better way to do this that also works with tags-on?

alex_jitianu
Posts: 851
Joined: Wed Nov 16, 2005 11:11 am

Re: CSS for image-before-bullet

Post by alex_jitianu » Thu Jul 15, 2021 10:58 am

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: 7
Joined: Thu Sep 24, 2020 8:20 pm

Re: CSS for image-before-bullet

Post by fjeneau » Fri Jul 23, 2021 1:36 am

That produces a result like:
image.png
image.png (3.52 KiB) Viewed 314 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: 203
Joined: Wed Oct 16, 2019 3:47 pm

Re: CSS for image-before-bullet

Post by julien_lacour » Fri Jul 23, 2021 6:00 pm

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: 7
Joined: Thu Sep 24, 2020 8:20 pm

Re: CSS for image-before-bullet

Post by fjeneau » Wed Jul 28, 2021 9:39 pm

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: 203
Joined: Wed Oct 16, 2019 3:47 pm

Re: CSS for image-before-bullet

Post by julien_lacour » Thu Jul 29, 2021 2:49 pm

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