Simple way to implement vr together with list items without tables?
I edit and format a lot of long text documents using HTML. Quite often I have to edit lists with items that contain 5 or 10 or more paragraphs, which is quite a long time before readers see the next item in the list, to remind them that they are reading the listed data (I hope this makes sense).
Anyway, I'm wondering if there is an easier way than using tables to create a vr (vertical rule) that starts on the next line after the tag <li>
and runs alongside multiple paragraphs until the end tag is reached </li>
, signaling the reader that they are still reading information / details belonging to the list.
source to share
You can add something like:
.vrc{border-left:3px coral solid;}
.vrt{border-left:6px white solid;}
between your tags <style>
and then you can implement list items like:
<li class="vrc"><div class="vrt">
the .vrt
css def. adds a small buffer between the text and a colored vertical bar that runs vertically along it. Change the number of pixels according to your preference. or just don't delete it at all.
Just make sure your end tag </li>
appears after the </p>
end tag of the last paragraph in the list item.
source to share