How to make custom highlights in CSS and Elementor | 2 ways to create thick color line BEHIND text
In this tutorial, learn how to create a thick colored line or a highlight effect BEHIND certain words in your text using Elementor and CSS. I will show you two ways to do this - the first one is using gradient backgrounds and the second is using 'before' pseudoelement.
💻 Grab the CSS code here:
https://www.cssgamelab.com/2024/11/28...
🚀 Interactive CSS Basics course for designers and non-coders:
https://www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
0:00 - Intro
0:28 - Create some text first
0:56 - The first way: gradient background
1:39 - CSS Gradient website
4:15 - Adding 'span' tags
5:17 - CSS code for the first way
7:48 - The second way: 'before' pseudoelement
11:10 - How to add CSS with Elementor FREE
12:07 - First version with Elementor FREE
14:17 - Second version with Elementor FREE
Both ways are using so called 'span' tags to apply this effect only to certain parts of your text and certain words, not the entire paragraph. This way you can highlight bits of your text that you want and make them stand out. The effect is similar to strikethrough effect but the line is going BEHIND the text, not over it.
The website link I am using to create and grab the CSS code for my custom gradients:
https://cssgradient.io/
This tutorial is using Elementor builder (FREE or Pro version - find the link below) and CSS.
––––––––––––––––––––––––––––––
PURCHASE AND DOWNLOAD ELEMENTOR PRO:
https://be.elementor.com/visit/?bta=6...
––––––––––––––––––––––––––––––
SIMPLE CUSTOM CSS AND JS PLUGIN:
To use custom CSS code with Elementor FREE, I am using the Simple Custom CSS and JS plugin for Wordpress that you can download here:
https://wordpress.org/plugins/custom-...
Have fun and thanks for watching!
If this tutorial helped you, please share or subscribe.
––––––––––––––––––––––––––––––
This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
––––––––––––––––––––––––––––––
Have a specific problem in Elementor that you don't know how to solve with CSS? Comment below to let me know which video you would like to see next!
––––––––––––––––––––––––––––––
MUSIC:
Artist: Corbyn Kites
Track Title: Staycation
––––––––––––––––––––––––––––––
Watch video How to make custom highlights in CSS and Elementor | 2 ways to create thick color line BEHIND text online, duration hours minute second in high quality that is uploaded to the channel CSS Express 30 September 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 2,967 times and liked it 34 visitors.
