# Css-powered outline-like mode

**URL:** <https://forum.obsidian.md/t/css-powered-outline-like-mode/3932>\
**Category:** Feature requests\
**Created:** [August 1, 2020, 8:38pm UTC](https://forum.obsidian.md/t/css-powered-outline-like-mode/3932 "2020-08-01T20:38:15Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![mjedmonds](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/bbe5ce/32.png) [@mjedmonds](https://forum.obsidian.md/u/mjedmonds)\
**Post date:** [August 4, 2020, 7:34pm UTC](https://forum.obsidian.md/t/css-powered-outline-like-mode/3932/2 "2020-08-04T19:34:23Z")

</div>

I would also love to see better visual/display support of outlines in both edit/source and preview mode! It would be great to have something like (but a bit more subtle):

```auto
- some idea
| - some more details
| | - details on the further details
| - some other more details
- some other idea
| - some more details on some other idea

```

Outlining may not be the main point of obsidian, but it is a common use, and it’s good to keep outlines integrated with PKM.

The following CSS roughly achieves what I was suggesting (must use tabs for indentation in source view)

```auto
/*Bullet list relationship lines*/
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid #424958;
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
}

```

From [here](https://forum.obsidian.md/t/atom-theme-with-bells-and-whistles/2864/5) and @ryanjamurphy

---

_[View the full topic](https://forum.obsidian.md/t/css-powered-outline-like-mode/3932)._