# Aligning a Callout Block to an Indented List item above it and also render the bullet point of the indented list item

**URL:** <https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679>\
**Category:** Help\
**Tags:** callouts, editor-parser\
**Created:** [June 8, 2025, 6:44am UTC](https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679 "2025-06-08T06:44:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronplays](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/ecae2f/32.png) [@aaronplays](https://forum.obsidian.md/u/aaronplays)\
**Post date:** [June 8, 2025, 6:44am UTC](https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679/1 "2025-06-08T06:44:38Z")

</div>

### What I’m trying to do

I’m trying to align a callout block to the indented list item above it and render the bullet points.

I have list containing another layer of lists, to which I want to align the left side of the callout block. I’m able to align the block, but it removes the bullet points from rendering.

I hope this screenshot shows what I want to do–

 ![Left is Editor, Right is Reader](https://forum.obsidian.md/uploads/default/original/3X/e/6/e653eb0d542baf4b7117a95468bb11b8c952389e.png)

### Things I have tried

- Adding a space above the callout block
- Adding space after callout block
- Adding a “-” before callout block starting `> [!info]`

---

<div class="post-metadata">

**Author:** ![dawni](https://forum.obsidian.md/user_avatar/forum.obsidian.md/dawni/32/79261_2.png) [@dawni](https://forum.obsidian.md/u/dawni)\
**Post date:** [June 10, 2025, 5:11pm UTC](https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679/2 "2025-06-10T17:11:11Z")

</div>

I don’t know the reason that a top-level list item can hold a callout (and align the callout to the list content) while a nested list item seems like it won’t.

However, if your concern is just the appearance/location of the callout with dot lists (not sub-numbered lists), then a CSS snippet might be the way to go.

Here’s an example. When you want to align a callout with an indented list, put `|indent1` in the callout metadata:

```md
> [!note | indent1]

```

to get this result:

 ![callouts aligned with list items](https://forum.obsidian.md/uploads/default/original/3X/7/e/7ec8fb2da78b224041a458753e5d8e994f3be6e4.png)

using this snippet:

```css
:is(.markdown-source-view, *) .callout[data-callout-metadata~="indent1"] {
	margin-inline-start: calc(var(--list-indent) + 24px);
}

:is(.markdown-source-view, *) .callout[data-callout-metadata~="indent2"] {
	margin-inline-start: calc(2 * var(--list-indent) + 24px);
}

```

It includes a level 2 version too, `|indent2`, so you can see how to extend it to mroe levels if you want.

([how to use CSS snippets](https://help.obsidian.md/snippets))

---

<div class="post-metadata">

**Author:** ![dawni](https://forum.obsidian.md/user_avatar/forum.obsidian.md/dawni/32/79261_2.png) [@dawni](https://forum.obsidian.md/u/dawni)\
**Post date:** [June 10, 2025, 5:26pm UTC](https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679/3 "2025-06-10T17:26:55Z")

</div>

After all that snippeting I feel silly, because you can do it in the rendered markdown. No tricks, just syntax.

Paste this to see how:

```css
- item
> [!note]
> callout content

- item
	- subitem
	> [!note]
	> callout content

- item
	- subitem
		- subitem
		> [!note]
		> callout content

```

The above gives me this by default:

 ![callouts in lists](https://forum.obsidian.md/uploads/default/original/3X/9/2/9243058d6fcf37c0bf1fa22a00cc9733f8e35edf.png)

---

<div class="post-metadata">

**Author:** ![aaronplays](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/ecae2f/32.png) [@aaronplays](https://forum.obsidian.md/u/aaronplays)\
**Post date:** [June 13, 2025, 3:01am UTC](https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679/4 "2025-06-13T03:01:03Z")

</div>

Thanks for your replies. Don’t worry about feeling silly, I’m right up there with you, because I did try exactly what you did but I didn’t check it in Reader Mode.

In the Editor Mode, the callouts aren’t rendered like that when I indent them. They appear as code blocks for some reason.

 ![Indented Callouts](https://forum.obsidian.md/uploads/default/original/3X/3/4/34dbd6489a70320cb7f43e0f642911e4caafabb8.png)

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [July 11, 2025, 3:01am UTC](https://forum.obsidian.md/t/aligning-a-callout-block-to-an-indented-list-item-above-it-and-also-render-the-bullet-point-of-the-indented-list-item/101679/5 "2025-07-11T03:01:49Z")

</div>

Closed on July 11, 2025, 3:01am UTC

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.