[Support request] create line between bullets

[Shami]

I want this type of bullet style

I’m already using this css for unordered lists:

.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li:before {
content: ”;
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 0 15px 0 15px;
top: -5px;
border-radius: 10px;
background-color: #ccc;
}

Give me css to add lines between the bullets as shown in the image.

[David]

Hi there,

please share a link to the image so we can see what style you would like us to provide custom code for, and we will be very pleased to help you.

thanks in advance

[Shami]

https://imgur.com/a/kqnrDPk

I added this image earlier, not sure why it didn’t show earlier.

[Ying]

how do you make the list wrap to the 2nd line？ Are you adding <br> element to the list?

Let me know!

[Shami]

This is actually in Notion, I’m using Notion Boost plugin to add this connecting line between bullet dots.

So I have no idea how to do this.

All I want is simple line connecting the bullets.
The line appears when there are more than 1 line in any point.

Also take a look at scr.

[Fernando]

Hi Shami,

For reference, can you provide the link to the list you currently have? We’ll try to see what we can do.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Shami]

I’m using this CSS:

.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li:before {
content: ”;
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 0 15px 0 15px;
top: -5px;
border-radius: 10px;
background-color: #ccc;
}

The above only changes the color and size of bullets.

Rest is the same what Generatepress offers.

Check the link as you asked.

[Fernando]

Can you try this code instead?:

.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li:before {
content:'';
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 23px  15px 0 15px;
top: -5px;
border-radius: 10px;
background-color: #ccc;
}

.entry-content ul li{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start
}

.entry-content ul:after{
    content:'';
    width: 1px;
    background-color: #ccc;
    position: absolute;
    left: 19px;
    top: 50%;
    transform:translateY(-50%);
    height: 88%;
}

.entry-content ul {
    position: relative;
}

[Shami]

I’m noticing some irregularity in the bullet circles’ size.

Please check the review section at the bottom where pros and cons are written.

Link is attached.

[Fernando]

I’m not noticing the “irregularity” from my end.

Can you take a screenshot of it?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Shami]

check link

[Fernando]

I see. How about this one?:

.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li {
    position: relative;
    margin-left: 40px;
}
.entry-content ul li::before {
content:'';
display: block;
position: absolute;
width: 12px;
height: 12px;
top: 50%;
transform:translateY(-50%);
left: -30px;
border-radius: 100%;
background-color: #ccc;
}

.entry-content ul::after{
    content:'';
    width: 1px;
    background-color: #ccc;
    position: absolute;
    left: 16px;
    top: 50%;
    transform:translateY(-50%);
    height: 100%;
}

.entry-content ul {
    position: relative;
}

[Shami]

Thanks. Works perfectly.

How can I add this same style to my Table Of Contents?
I’m using LuckyWP Table of Contents plugin.

Also, this style is also interferring with Getaawp product box.
The description with bullet list is not working only there properly.

[Fernando]

On what page is that? I’m trying to search for the text in your screenshot on the link you provided but it’s not appearing.

[Shami]

check here

[Author]

Posts