Question posted in
The full documentation can be found here.

Divi 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?

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Ok get rid of that whole class and styles and everything about it that you made for that underline bar and do it this way by only adding to your .et_pb_text_1 CSS. Add this border-bottom: 10px solid #25c6fe and display it as a table-cell.

    so like this:

    .et_pb_text_1 {
  border-bottom: 10px solid #25c6fe;
  display: table-cell
}
    Login or Signup to reply.
  3. 0

    Here you can try:

    .mytext{
color: black;
    background-image: linear-gradient(180deg, transparent 70%, #25c6fe 0);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
    <h1 class="mytext">Host an event</h1>

    Hope it works. 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search