Hello

This is untested but you can try applying this styling to the hr tab by adding the following to the Custom CSS field of your template settings...

hr {

	position: relative;

}

hr::before,

hr::after {

    position: absolute;

    bottom: 0;

    left: 0;

    height: 4px;

    content: '';

    opacity: .8;

}

hr::before {

    background-color: rgba(0,0,0,0.25);

    right: 0;

}

hr::after {

    background-color: var(--primary);

    right: calc(100% - 70px);

}

Ciaran

thank you so much

hi
I have installed this code
but i dont know how to create this line in my article
Please tell me what to do.

Hello

If you are using a code editor (eg. Codemirror) then simply use the hr tag...

<hr>

If using a WYSIWYG editor then look for a Horizontal Rule option.

Ciaran

Thank you it work

hr { height:5px; width:200px;
background-color: rgba(22,165,255,1); }

hr {
position: relative;
}
hr::before,
hr::after {
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width:35%;
content: '';
opacity: 1;
}
hr::before {
background-color: rgba(0,0,0,0.25);
right: 0;
}
hr::after {
background-color: var(--primary);
right: calc(100% - 70px);
}

Great... thank you for the update!

Ciaran