Everything required to do this 👇 The heading 👇 Awesome underline effect that definitely deserves a like! The CSS 👇 /* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */ .underline { text-decoration: underline 0.25em #635bff; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } ❗ NOTE: Browser incompatibility may mean this effect is not fully supported on certain browsers or on specific versions of browsers. You can use the following CSS to ensure maximum compatibility and it should work perfectly with Apple devices - the process is the same 👇 /* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */ .underline { text-decoration-line: underline; text-decoration-thickness: 0.25em; text-decoration-color: #635bff; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } The heading with the style directly inside the span tag 👇 Awesome underline effect that definitely deserves a like! An example of an underline in 2 colors 👇 Awesome underline effect, worthy of a sub, in multiple colors.
Ah! Another great tutorial, thanks. How to offset x and y for an angle of underline? Would it be eg: transform: rotate(20deg); inserted somewhere in the CSS?
Greetings from Chile, congratulations on your video, I have a question, can you help me? I need to do the same but underlining above, with the overline command, I tried but it doesn't work. Thank you!
Hello! Of course, try this 👇 .underline { text-decoration-line: overline; text-decoration-thickness: 0.5em; text-decoration-color: #635bff; } And if you want both the underline and the overline, try this 👇 /* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */ .underline { text-decoration-line: underline overline; text-decoration-thickness: 0.5em; text-decoration-color: #635bff; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } Keep in mind, though, that the offset doesn't work with the overline. Let me know how it goes! 💪
Yes, it does! You just need to add it under 'Text' not under 'Visual'. Once you do that, anything that works with headings works with text editors as well. 👌
Amazing video and trick!! Works perfectly fine on desktop but somehow when I load my site on my phone the effect is not there🤔 Any thoughts or experiences on this? Keep it up man. Well deserved Like and ne subscriber👍⭐
Thank you very much! And I'm sorry to hear that you're having issues. In my experience, there are 2 things you can do that will very likely fix this and other layout issues, or issues with changes not showing up on the front-end of your website(s). The first thing you can try is going into your dashboard, going under ''Elementor'', going under ''Tools'' and pressing ''Regenerate Files & Data''. The second thing you should try is clearing out every cache your website might have. These are, usually but not always, the CDN (content delivery network) cache, the server (hosting) cache and any cache created by plugins. Keep in mind that your browser, in this case, the browser you're using on your phone, also has a cache that might prevent changes from showing even if you clear out all of the others. So, after you clear them out, if the changes are still not appearing on your phone, try using a private/incognito window to test it out. Thank you, again, for your support and for your kind words! 🙌🙏 Let me know if this fixed your issues. 💪
Hey Leon. Just getting back to you that the cause just might be browser incompatibility. Try this: .underline { text-decoration-line: underline; text-decoration-color: #635bff; text-decoration-thickness: 0.25em; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } Let me know how it goes. 💪
Hello! I'm assuming you're using an iPhone? Meaning the browser is Safari? It's probably because some parts of the CSS aren't fully supported in all versions of the browser. Try this: /* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */ .underline { text-decoration-line: underline; text-decoration-thickness: 0.25em; text-decoration-color: #635bff; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } Let me know how it goes! 💪
Perfect, I'm glad you managed to get it working. And for anyone else reading - yes, it does work in the 'Text Editor' widget as well, you just need to add it under 'Text' not 'Visual'. Thank you for your support, I appreciate it! 🙌
Hi! That's very likely a caching issue. What I recommend you try first is that you go into your dashboard, go under ''Elementor'', go under ''Tools'' and press ''Regenerate Files & Data''. Also, try to clear out every cache - the CDN (content delivery network) cache, the server (your hosting) cache and any cache created by any plugin. This most often fixes things. Let me know how it goes! 💪
Thank you for letting me know. Your comment and several others made me realize there's probably more going on than caching issues. After a good while of research, I found out the cause is very likely incompatibility with the Safari browser. Try this: /* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */ .underline { text-decoration-line: underline; text-decoration-thickness: 0.25em; text-decoration-color: #635bff; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } Let me know if it works! 💪😁
Hi 🎉 iam very happy to see your contant is OMG😂 Can you create video on elementor topic. / When we relode the page a popup animation comes . Make a video on soon
Hello! I have a few other videos in the works, so I'm not sure I'll be able to create that one. Still, I can offer some advice! A good starting point to achieve that is by going into your ''Site Settings'' and then into ''Page Transitions''. There, you'll find ''Preloader''. That's where you can set up an animation that shows up when you reload a page. If you had anything more complex in mind, you could also create a pop-up and make sure it displays every time a page reloads. When working with pop-ups, you can put in any kind of content, including animations. Thank you for your support! 💪
Hey Man, Mine is working on laptop but doesn't work on mobile version? While in incognito mode on with laptop it's working when i put on mobile wide... Can u help with this problem?
Hi! I'm assuming you have an iPhone and the browser you're viewing it on is Safari? If so, it's probably because some parts of the original CSS aren't fully supported in all versions of the browser. Try this: /* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */ .underline { text-decoration-line: underline; text-decoration-thickness: 0.25em; text-decoration-color: #635bff; text-decoration-skip-ink: none; text-underline-offset: -0.15em; } Let me know how it goes! 💪
@@Reialesa Hi, can you help to make the text more internal. That is, the strikethrough would be a little over on each side and would not end exactly where the text begins and ends?
Hey! That's quite a bit more complicated, but this article explains it better than I could over comments: sharkcoder.com/visual/underline Here are some other ways you can try: stackoverflow.com/questions/7294369/how-can-i-make-an-underline-some-pixels-longer-than-the-headline Many of these rely on using a border, which is a very common way of creating underlines. However, it does require quite a bit more customization. And it is more difficult to position properly. You could also try using a non-breaking space right within your text. That can work well if your text is structured properly (for example, if you just need to add the underline to a specific word that is in its own line). You just add it to your text directly, like this: Awesome underline effect that definitely deserves a like! You'll notice that right before and after the word underline, I added in '' ''. That's a non-breaking space and you can add in as many as you want. You can read more about it here: www.w3schools.com/html/html_entities.asp
Everything required to do this 👇
The heading 👇
Awesome underline effect that definitely deserves a like!
The CSS 👇
/* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */
.underline {
text-decoration: underline 0.25em #635bff;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
❗ NOTE: Browser incompatibility may mean this effect is not fully supported on certain browsers or on specific versions of browsers. You can use the following CSS to ensure maximum compatibility and it should work perfectly with Apple devices - the process is the same 👇
/* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */
.underline {
text-decoration-line: underline;
text-decoration-thickness: 0.25em;
text-decoration-color: #635bff;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
The heading with the style directly inside the span tag 👇
Awesome underline effect that definitely deserves a like!
An example of an underline in 2 colors 👇
Awesome underline effect, worthy of a sub, in multiple colors.
Cool. One thing that is When the heading appears I want the underline to have an animation like underline filling left to right. How can we do that?
Thank you, worked a charm - very much appreciated.
Wow! Thanks. This was so helpful. I'm also happy the colour can be changed using the HEX format too. Just Awesome 👍
Thank you for such an awesome comment, Bruno! I'm happy to hear that the video was helpful. 🙌💪
i love this guy support him
he is got good content
Thank you very much for such a supportive comment! 🙏🙌 I appreciate it a lot.
Subscribed keep growing ❤
I'll certainly do my best! Thank you very much, I appreciate your support. 🙌🙏
Great video 👌 how to make the underline color change on hover?
Ah! Another great tutorial, thanks. How to offset x and y for an angle of underline? Would it be eg: transform: rotate(20deg); inserted somewhere in the CSS?
Thanks for the tutorial. How can you make the line animate from left to right?
Greetings from Chile, congratulations on your video, I have a question, can you help me? I need to do the same but underlining above, with the overline command, I tried but it doesn't work.
Thank you!
Hello! Of course, try this 👇
.underline {
text-decoration-line: overline;
text-decoration-thickness: 0.5em;
text-decoration-color: #635bff;
}
And if you want both the underline and the overline, try this 👇
/* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */
.underline {
text-decoration-line: underline overline;
text-decoration-thickness: 0.5em;
text-decoration-color: #635bff;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
Keep in mind, though, that the offset doesn't work with the overline. Let me know how it goes! 💪
Excellent, thanks for posting. Does this work in text editor?
Yes, it does! You just need to add it under 'Text' not under 'Visual'. Once you do that, anything that works with headings works with text editors as well. 👌
@@Reialesa ok cool, thanks alot bro, I will give it a try, cheers
Amazing video and trick!! Works perfectly fine on desktop but somehow when I load my site on my phone the effect is not there🤔 Any thoughts or experiences on this? Keep it up man. Well deserved Like and ne subscriber👍⭐
Thank you very much! And I'm sorry to hear that you're having issues. In my experience, there are 2 things you can do that will very likely fix this and other layout issues, or issues with changes not showing up on the front-end of your website(s). The first thing you can try is going into your dashboard, going under ''Elementor'', going under ''Tools'' and pressing ''Regenerate Files & Data''.
The second thing you should try is clearing out every cache your website might have. These are, usually but not always, the CDN (content delivery network) cache, the server (hosting) cache and any cache created by plugins. Keep in mind that your browser, in this case, the browser you're using on your phone, also has a cache that might prevent changes from showing even if you clear out all of the others. So, after you clear them out, if the changes are still not appearing on your phone, try using a private/incognito window to test it out.
Thank you, again, for your support and for your kind words! 🙌🙏
Let me know if this fixed your issues. 💪
Try this :
The heading 👇
This text underline
The CSS 👇
.highlight {
background: linear-gradient(180deg,transparent 80%, #f34739 20%);
}
Hey Leon. Just getting back to you that the cause just might be browser incompatibility. Try this:
.underline {
text-decoration-line: underline;
text-decoration-color: #635bff;
text-decoration-thickness: 0.25em;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
Let me know how it goes. 💪
The code is not working on mobile for me. Can you help me?
Hello! I'm assuming you're using an iPhone? Meaning the browser is Safari? It's probably because some parts of the CSS aren't fully supported in all versions of the browser. Try this:
/* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */
.underline {
text-decoration-line: underline;
text-decoration-thickness: 0.25em;
text-decoration-color: #635bff;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
Let me know how it goes! 💪
It's now showing on mobile! Thank you!🥳
@@Reialesa
Awesome! No problem, thank you for your support 😁🙌
Can this be done in a Text Editor as well?
Nvm, just tried it and it worked! Thanks for the video!
Perfect, I'm glad you managed to get it working. And for anyone else reading - yes, it does work in the 'Text Editor' widget as well, you just need to add it under 'Text' not 'Visual'.
Thank you for your support, I appreciate it! 🙌
The code ints working for me. Maybe I am doing something wrong but its not working
Hi! That's very likely a caching issue. What I recommend you try first is that you go into your dashboard, go under ''Elementor'', go under ''Tools'' and press ''Regenerate Files & Data''. Also, try to clear out every cache - the CDN (content delivery network) cache, the server (your hosting) cache and any cache created by any plugin. This most often fixes things. Let me know how it goes! 💪
It's not working for me in Safari, but is in Chrome on a Mac. FYI
Thank you for letting me know. Your comment and several others made me realize there's probably more going on than caching issues. After a good while of research, I found out the cause is very likely incompatibility with the Safari browser. Try this:
/* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */
.underline {
text-decoration-line: underline;
text-decoration-thickness: 0.25em;
text-decoration-color: #635bff;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
Let me know if it works! 💪😁
That worked for me. Thank you so much! You really helped me. Continue the great work! 🙏🏼@@Reialesa
Hi 🎉 iam very happy to see your contant is OMG😂
Can you create video on elementor topic. / When we relode the page a popup animation comes .
Make a video on soon
Hello! I have a few other videos in the works, so I'm not sure I'll be able to create that one. Still, I can offer some advice! A good starting point to achieve that is by going into your ''Site Settings'' and then into ''Page Transitions''. There, you'll find ''Preloader''. That's where you can set up an animation that shows up when you reload a page. If you had anything more complex in mind, you could also create a pop-up and make sure it displays every time a page reloads. When working with pop-ups, you can put in any kind of content, including animations. Thank you for your support! 💪
@@Reialesa thanks to respond me
Hey Man, Mine is working on laptop but doesn't work on mobile version? While in incognito mode on with laptop it's working when i put on mobile wide... Can u help with this problem?
Hi! I'm assuming you have an iPhone and the browser you're viewing it on is Safari? If so, it's probably because some parts of the original CSS aren't fully supported in all versions of the browser. Try this:
/* If you don't want to have an offset, delete text-underline-offset. Setting it to 0 will have a slightly different effect. */
.underline {
text-decoration-line: underline;
text-decoration-thickness: 0.25em;
text-decoration-color: #635bff;
text-decoration-skip-ink: none;
text-underline-offset: -0.15em;
}
Let me know how it goes! 💪
@@Reialesa Hei Man, That worked well! thank you so much!
That's great to hear, I'm happy to help! Thank you for your support 🙏
@@Reialesa Hi, can you help to make the text more internal. That is, the strikethrough would be a little over on each side and would not end exactly where the text begins and ends?
Hey! That's quite a bit more complicated, but this article explains it better than I could over comments: sharkcoder.com/visual/underline
Here are some other ways you can try: stackoverflow.com/questions/7294369/how-can-i-make-an-underline-some-pixels-longer-than-the-headline
Many of these rely on using a border, which is a very common way of creating underlines. However, it does require quite a bit more customization. And it is more difficult to position properly.
You could also try using a non-breaking space right within your text. That can work well if your text is structured properly (for example, if you just need to add the underline to a specific word that is in its own line). You just add it to your text directly, like this:
Awesome underline effect that definitely deserves a like!
You'll notice that right before and after the word underline, I added in '' ''. That's a non-breaking space and you can add in as many as you want. You can read more about it here: www.w3schools.com/html/html_entities.asp