Connect icons using CSS :before and :after?

Support
#1

I have a row, with 5 columns. In each column is an image.

I want to connect the images together using a line of CSS.

I know I can do this by adding some custom CSS with the “:before” and “:after” selectors. But I can’t figure out what code to use.

Do you think you could take a quick look for me?

Here is the page: https://elementpaints.com/test-page-2/

This is what I’m trying to achieve: http://nimb.ws/JUszbA

#2

Hi There,

Please add the my-section class to the class field of your section.

After that adding the following CSS under Customizer > Custom > Global CSS:

.my-section:before {
    content: '';
    width: 70%;
    border: 1px dashed #f0f0f0;
    position: absolute;
    top: 50%;
    z-index: 0;
    left: 15%;
}
#3

Thanks for your help!

After some tweaks I got it working inside Cornerstone page builder. But for some reason, when I view it normally (outside of cornerstone) it gets shifted to the left.

Here is what it looks like inside Cornerstone page builder (perfect): http://nimb.ws/mh4VXA

And you can view the wrong version here on the home page, just scroll to the bottom. It has all been shifted to the left: https://elementpaints.com/

And here is my modified version of the CSS I am using:

@media (min-width: 768px) {
    .my-css-line:before {
        content: '';
        width: 20%;
        border: 2px dashed #dddddd;
        position: absolute;
        top: 46%;
        z-index: 0;
    }
}

P.S. I added it to the page custom CSS, not global custom CSS, because I don’t need this one all pages.

#4

We’re sorry but this would be getting into custom development which is outside the scope of our support. Please consult a third party developer to fix or enhance your custom CSS for you.

Thank you for understanding.

#5

Well actually, if something displays correctly on Cornerstone but not on the actual page after you exit the Cornerstone editor, then I think that would very much be a problem related to Theme X.

#6

Hi There,

Please update your code to :

@media (min-width: 768px){
.my-css-line:before {
    content: '';
    width: 20%;
    border: 1px dashed #ddd;
    position: absolute;
    top: 50%;
    z-index: 0;
    text-align: right !important;
    margin-left: 92px;
} }

You might need to add another media queries to satisfy the main standard screen widths.

But as Christian said, this falls under custom development and you will need to do the adjustments yourself.

Thank you

#7

Thanks that worked!

#8

On behalf of my colleague, you’re welcome. Cheers!