CSS underline hover effect, how are we going to fix that in Divi? In a previous blog, I talked about an introduction to HTML. In this blog, I want to expand the HTML a little bit. Then the plan is to add some CSS to it to create a simple web page with a simple top menu with a hover that changes the color of the menu item. This is what we can do with the Divi menu as standard. If we want to add an underline, we will do that with some simple CSS underline hover effect. However, a standard rig is rather dull. So we’re going to pimp that a little bit afterward to make it a bit nicer. Great, let’s get started.
Let’s start with the basics
First I will show you our starting point and what it looks like in the browser.
The output is still just text and some tags. At the top, we have a list and below the list, we have some H-tags and a simple paragraph. The list we are going to use for a top menu with a basic CSS code.
What is CSS?
CSS is the code that is used to determine how the website will look. We determine the style of the HTML document. In order to do this, we will first have to indicate how and where the HTML can find the style. This can be done in 3 ways. External, internal, and inline. In this blog, we use the internal way. We do this by using style tags as we can see in the other picture. In the example, we tell the browser that everything in the body has the background color black and the foreground color white.
The menu with color hover
A list is normally placed under each other, but to make it a real menu we first want to tell the browser that it should not be under each other but next to each other. And without those bullet points. To do that, we first create a class.
This is a collection of settings that we give a logical name. Kind of a group so to speak. In the HTML code, they will also have to call this class. In this case, we’ll call the class menu because we’re going to use it just for this. We also want to call the list because we want to put them next to each other. We do this by putting a period in front of the class name and we call the list by placing a space plus li after the class name. Next, we put what we want to put in this group between { and }. If we do this without errors we get the example below. But before we take a good look at that, we have to add some more code.
To make the list items look next to each other and look like a menu use the Display property with the value inline. To make a menu item clickable we need to create a link from the item with the anchor property. You can see how this is done in the code.
To change the behavior and appearance of the menu items we will first have to call them. We do this with .menu li a followed by the { and } within which we give the correct values. First we removed the underline and changed the color, we also gave the items some more space with padding.
What we are still missing is that the browser shows that we can click on it, we can do this by, for example, changing the color when we move the mouse over it. We call this the hover function. We can call the is CSS by using .menu li a:hover and then eg change the color to eg red. Take a good look at the code and what the browser shows.
CSS underline hover effect
In Divi the above is no problem and easy to perform. The underline is a bit trickier, which is evident from the fact that the question can be found a lot on google. However, this is quite easy to perform with a minimal knowledge of HTML and CSS. How do we do that then? Simple, we replace the color propertie with the text-decoration we used earlier to remove the underline. So instead of none we put the underline. See the pictures below for the result.
How to stop the boring CSS underline hover effect
Normally a normal leader is sufficient, but it is more fun to make it more animated. To do that I added some extra CSS code. No, I didn’t come up with this last piece myself but saw this in another blog. This blog by Ania contains a more extensive explanation about this and how you can apply this in Divi theme. I must say I am a huge fan of hers. If you think that css is a step too far, then she has a great toolbox that solves a lot of problems that you normally need php, javascript or css for. If you still want to try it, below is the code and a picture of the browser with the effect. On this website you can see how I applied it to my website made with Divi theme. If you don’t have a Divi theme yet, but you are enthusiastic, click here for the website. The index.html of the code is hier.
0 Comments