# How to add bullet point vertical lines to preview mode too?

**URL:** <https://forum.obsidian.md/t/how-to-add-bullet-point-vertical-lines-to-preview-mode-too/26274>\
**Category:** Help\
**Tags:** reading, custom-css\
**Created:** [October 28, 2021, 9:34am UTC](https://forum.obsidian.md/t/how-to-add-bullet-point-vertical-lines-to-preview-mode-too/26274 "2021-10-28T09:34:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![desk7](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/91b2a8/32.png) [@desk7](https://forum.obsidian.md/u/desk7)\
**Post date:** [October 28, 2021, 9:34am UTC](https://forum.obsidian.md/t/how-to-add-bullet-point-vertical-lines-to-preview-mode-too/26274/1 "2021-10-28T09:34:46Z")

</div>

Obsidian 0.12.19 on Windows 10

### Things I have tried

I use the outline plugin to show the vertical lines in bullet list but it works only in edit mode.

### What I’m trying to do

I would like to see them in preview mode so that the exported PDF shows them too.  
My request is the same as this one [How to print outliners lines in PDF too, (that, left side bulletin lines)](https://forum.obsidian.md/t/how-to-print-outliners-lines-in-pdf-too-that-left-side-bulletin-lines/24043), which unfortunately received no answer.

---

<div class="post-metadata">

**Author:** ![desk7](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/91b2a8/32.png) [@desk7](https://forum.obsidian.md/u/desk7)\
**Post date:** [October 28, 2021, 2:37pm UTC](https://forum.obsidian.md/t/how-to-add-bullet-point-vertical-lines-to-preview-mode-too/26274/2 "2021-10-28T14:37:12Z")

</div>

I’m sure I need a CSS snippet for the preview mode but I can’t find it anywhere

---

<div class="post-metadata">

**Author:** ![saf-dmitry](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/b5e925/32.png) [@saf-dmitry](https://forum.obsidian.md/u/saf-dmitry)\
**Post date:** [October 28, 2021, 3:45pm UTC](https://forum.obsidian.md/t/how-to-add-bullet-point-vertical-lines-to-preview-mode-too/26274/3 "2021-10-28T15:45:11Z")

</div>

@desk7 If you search the forum you will find a lot of info concerning your question. Below just some examples:

> [@Meta Post - Common CSS Hacks](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2):
>
> Bullet Point Relationship Lines v0.7.3 Compatible .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 rgba(0, 122, 255, 0.25); position: absolute; } .cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; } ul ul::before { left: -11px; top: 0; bottom: 0; } This has been floating on the discord, not sure who created it but thank you!

> [@\[Problem fixed\] CSS Problem: Bullet Point Relationship Lines doesn’t show correctly in edit mode](https://forum.obsidian.md/t/problem-fixed-css-problem-bullet-point-relationship-lines-doesn-t-show-correctly-in-edit-mode/13668/5):
>
> @Peterhou Sorry, I cannot confirm the problem using your example. With this CSS (basically the same as your snippet above) on my machine (macOS 10.14.6, Obsidian 0.11.5) it looks as follows: [Screenshot 2021-03-18 at 16.10.19] The slight shift in lines is caused by mixing spaces and tabs used for indentation in your example, which should be avoided. Here the CSS snipped I am using: .theme-light { --guide-line-fg: rgba(120, 120, 120, 0.2); } .theme-dark { --guide-line-fg: rgba(120, 1…

---

<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:** [December 10, 2021, 6:30am UTC](https://forum.obsidian.md/t/how-to-add-bullet-point-vertical-lines-to-preview-mode-too/26274/5 "2021-12-10T06:30:37Z")

</div>

Closed on December 10, 2021, 6:30am UTC

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