CSS for image-before-bullet

[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

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

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

[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]

That produces a result like:

image.png

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]

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]

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]

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