Search code examples
htmlcsswordpressdivi-theme

How to add line behind/under text with html/css in the divi WordPress theme

So im trying to add a line behind/under my text which i have partially manged to do (see attached.) enter image description here

To get the above outcome i added the following code into the :after section of the Divi theme's text module custom css option:

content: '';
position: absolute;
bottom: 15px !important;
left: 6px;
right: -10px;
height: 13px;
background: #25c6fe;
width: 19.8%;

I have two problems:

  • When saving the page it puts the line underneath the text.
  • If i center the text the line stays to the left

How can i fix these probelms? I assume the css is wrong?

Solution

  • It might result in a unnecessary complex css code, if you try to use :after to make your desired styling. Starting with the width property, which should always have the length of the element, because you want the whole text to be underlined, no matter how long it is. So I would suggest you try using the background-image property to make things work:

    .your_textmodule_class {
    color: black;
    background-image: linear-gradient(180deg, transparent 85%, #25c6fe 0);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    With the transparent percentage value, you can set the height of the line. Use less percent, if you want the line to have more height. Looking at your image, I think something like linear-gradient(180deg, transparent 70%, #25c6fe 0) could be what you want to achieve.