Javascript to Indent Text Segments Not Inside Style Tag or Beginning with Large Bullet Character?

I host my .com domain on Blogger.

I’ve modified an existing Blogger template.

I use a lot of lists to quickly display bits of information about physical objects so readers can easily scan content.

Two lists stacked vertically appear on a post page as shown in part A of the image…

On my home page Blogger shows a series of snippets of the latest several posts. Each snippet consists of the post title, a thumbnail of the first image in the post, and the first several lines of text from the post.

Unfortunately Blogger removes most HTML tags from the text lines it grabs from each post. Style tags such as bold remain. Link tags and br tags also remain. List tags are stripped out thus the same two lists above appear on the home page as seen in part B of the image.

I’ve been able to emulate the appear of a list within a home page snippet by using code similar to this within each post.

<b>List 1 Title:</b>
<ul>
<li><span class="bullet">● </span>Lectus sed dictum auctor aliquam convallis dictumst consequat dictum tortor quis.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Gravida metus inceptos quisque at convallis, scelerisque massa elit sit ornare, himenaeos litora odio tristique taciti maecenas vestibulum.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Inceptos bibendum accumsan justo orci eget.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Sodales sapien senectus justo commodo per rutrum proin lobortis fermentum faucibus tempor taciti maecenas vestibulum.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Ultrices accumsan cras phasellus nam tempor nostra lacinia nostra.</li>
<span class="return">
</span> </ul>
<b>List 2 Title:</b>
<ul>
<li><span class="bullet">● </span>Vestibulum euismod egestas per taciti maecenas.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Egestas per taciti maecenas vestibulum euismod.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Per taciti maecenas vestibulum.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Taciti maecenas justo commodo per rutrum proin lobortis.</li>
<span class="return">
</span>
<li><span class="bullet">● </span>Accumsan justo orci eget. Sapien senectus justo commodo per rutrum proin.</li>
<span class="return">
</span> </ul>

The two spans are hidden on the actual post page so as to not change the appearance of the lists. The home page snippets strip out the span tags, leaving a bullet + space and the br tag. This gets close to emulating a list within the home page snippet a seen in part C of the image.

This leaves the problem of the wrapped not being indented as with a actual list. I don’t think that will be possible with CSS or HTML.

The home page snippet only supports these tags:

<b>...</b>
<i>...</i>
<u>...</u>
<strong>...</strong>
<em>...</em>
<strike>....</strike>
<s>....</s>
<del>...</del>
<a>...</a>
<br>

Note: Blogger replaces any p tags in a post with br tags.

I am able to apply some styling to the actual snippet areas on the home page such as this:

.post-snippet .snippet-item {
line-height: 28px;
}

Is there some Javascript I could use within the head of the Blogger template to accomplish the indent that will work for various viewport widths? I ahve not been able to come up with a solution as you can’t simply reference the HTML tags as most are removed.

Some initial goals the Javscript would need to accomplish ?

  1. Content inside one of the supported style tags would not be indented. For the most part this would only likely be a bold introductory title above a list.

  2. A segment of text that begins with the large bullet character and which is flush with the left edge of snippet container is not indented.

  3. A segment of text does not begin with a large bullet chracter and which is flush with the left edge of the snippet container would be indented.