Rotating css svg

[Hessery]

What I’m trying to do

I’m trying to rotate the chevron that this piece of css allows you to add to your checkboxes:

> /* SVG chevron right for deferred/scheduled ('- [>]') */
/* '-' icon */
.HyperMD-list-line input[data-task=">"]:checked::before,
.markdown-preview-view li[data-task=">"]>input[type="checkbox"]:checked::before {
  content: '';
  top:2px;
  bottom:2px;
  background-color: white;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.12 7L3.26667 11.76L4.57333 13.0667L10.7333 7L4.57333 0.933332L3.26667 2.24L8.12 7Z'/%3E%3C/svg%3E");
}

I want it to point down

Things I have tried

I’ve tried adding a rotate parameter to the svg 90, but it just makes the whole checkbox white.

I’ve also sent a message to the original creator, but so far they haven’t replied.

[ariehen]

I edited your post to put it in a multi-line code block for the forum. Without the CSS in a code block, all your straight quotes, ">" become fancy quotes “>”, which won’t work. Hope you don’t mind.

[webinspect]

In CSS you can rotate objects using transform. Try adding transform: rotate(90deg); to the above CSS.

[Hessery]

Thanks mate, much appreciated!

[Hessery]

Thanks mate, worked a treat. Too bad all my downward chevrons now look like ticks

[webinspect]

Glad I could help! Different themes style those characters differently, so if you’re looking for something different you could always try another theme. The Minimal Theme, for example, styles that sort of task like this!