Pseudoelements in callouts

Custom CSS & Theme Design
, ,
1

I’m trying to do callout with custom CSS. My goal are callouts looks like listings on pictures.

code_example
code_example879×320 77.3 KB

file_example
root_example
user_example
user_example450×155 17.7 KB

Now root and user (and boot, it’s similar with this two) are realized with class for hand-writing ≤pre≥ tag and ::before/::after elements around it. This isn’t perfect but it works

Summary 
pre.boot, pre.root, pre.user{
    font-family: var(--font-monospace);
    font-size: smaller;
    color: var(--code-normal);
    text-wrap-mode: wrap;
    margin-top: 0;
    padding: 2px 10px;
    word-break: break-all; /* Разрывает длинные строки */
    background-color: var(--code-background);
    border-radius: var(--code-radius);
    border-width: var(--code-border-width);
    border-color: var(--code-border-color);
    border-style: solid;
}

pre.root::before{
    content: "root   ";
    font-weight: bold;
    color: #ee3939;
}
pre.root::after{
    position: absolute;
    left: calc(5ch + 10px);
    top: 2px;
    content: "#";
    font-weight: bold;
    color: #4d90df;
}

Things I have tried

I tried to go same way and made callout (it looks correctly in general). Then I add to it’s title pseudoelements but they doesn’t appear in note at all.

My code for callout:

.callout[data-callout="code"] {
    --callout-color: var(--callout-example);
    --callout-icon: lucide-code;
}

.callout[data-callout="code"] > .callout-title > .callout-icon ::after {
    content: CODE;
}

.callout[data-callout="code"] > .callout-title > .callout-title-inner::before {
    content: CODE;
    font-style: italic;
}

How can I to make standard addition to callout title to print root #, user $, CODE or FILE keywords?

2

To show the word “CODE” in the content, put it in quotes: content: "CODE";

For example:

[data-callout="code"] > .callout-title > .callout-title-inner::before {
	content: "CODE";
	padding-right: 1ch;
}
1 Like