This tutorial will help you add some cool Text underlines with a few lines of CSS
The default Rich Text editor settings do have simple Underline options for texts:
However, sometimes you might want to have a different color, more stylish and cool underlines to make it more attractive. You can see below the steps to achieve that:
Add sample content to the Text module
Add a <span> HTML tag and the custom class: et_underline_text to the text that you want to underline.
For example, this is the sample text that I want to underline, so this will be the code:<span class="et_underline_text">Sample Content</span>
You will need to switch to "Text" mode to add those <span> tags to the content.
Adding the CSS code for the underline effect.
Go to WordPress Dashboard > Divi > Theme Options > Custom CSS and add this CSS there:
.et_underline_text {
box-shadow: inset 0 -0.5em 0 #9fe8c3;
text-decoration: none;
}
After adding the CSS, save your Theme Options, and check the result on the front end. You should see some cool text underline effects on the text.
You can change the color code #9fe8c3 to any other color of your choice.