Adding circles at the end of a line element

[INcroatia]

Hi there,

We’re trying to add circles to the end of a line element, but nothing we tried CSS-wise has worked.

This is how the line currently looks like

and this is what we’re trying to achieve

How can we add a circle to the right end of the line? Thanks in advance!

[marc_a]

Hi @INcroatia,

Thanks for reaching out!

This feature is outside the scope of our theme support because it deals with custom CSS but I will give you a CSS code that can do this as a starting point.

First, I suggest that you add a class name to your cornerstone element so that they have some similarities. For example, I added hr-circle.

Then you can add the CSS below in your Pro > Theme Options > CSS.

.hr-circle:before {
    width: 20px;
    height: 20px;
    content: '';
    background-color: #dc6a26;
    position: absolute;
    border-radius: 50%;
    margin-top: -12px;
    margin-left: 175px;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[INcroatia]

Thank you so much, @marc_a!

[tristup]

Hi @INcroatia,

Glad that we are able to help you.

Thanks