Custom callout title in css

[mintier]

Hello!

I’m making a custom callout and was wondering if it’s possible to change the default title that’ll be displayed from the CSS. Here’s an example:

.callout[data-callout="custom-callout"] {
	--callout-color: var(--color-red-rgb);
	--callout-icon: lucide-alert-triangle;
}

With that in the snippets folder, > [!custom-callout] gives

However, I would like to change the title to read “Custom callout with a much longer title line”, so that it looks like

I know that I can accomplish this by doing

> [!custom-callout] Custom callout with a much longer title line

or by replacing the data-callout with “custom-callout-with-a-much-longer-title-line”, but both of these are cumbersome to type.

Is there some way to change the title from the CSS without having to change the data-callout? Like a --callout-title attribute?

[Olondre]

Someone who’s much better at CSS than me will probably come up with a much better solution, but this is a working solution:

	.callout[data-callout="custom-callout"] {
		--callout-color: var(--color-red-rgb);
		--callout-icon: lucide-alert-triangle;
	}
	.callout[data-callout="custom-callout"] .callout-title {
		visibility: hidden;
	}
	.callout[data-callout="custom-callout"] .callout-icon {
		visibility: visible;
	}
	.callout[data-callout="custom-callout"] .callout-icon::after {
		content: "This is a really long title that I don't have to type out anymore";
		padding-left: 5px;
	}
	.callout[data-callout="custom-callout"] .callout-fold {
		visibility: visible;
		margin-right: auto;
		margin-left: -110px;
	}

[Olondre]

The margin-left: -110px; needs to be changed according to the length of the name you give your custom callout. This works if it’s named custom-callout. This is because the title is still there, it’s just hidden.

If you dont use the folding mechanism for that specific custom callout or you dont care about seeing the fold arrow you can completely delete this part:

	.callout[data-callout="custom-callout"] .callout-fold {
		visibility: visible;
		margin-right: auto;
		margin-left: -110px;
	}