Eliminate the underline effect when hovering over an element by using the

I am currently using a unique font to create icons for my navigation elements in the website example below:

The issue I am facing is that when a link is hovered over, both the link and the icon underneath display an underline.

I would like to find a solution to remove the underline only from the icon while keeping it on the link itself.

Below is the code snippet I am working with:

HTML
<ul class="hidden-phone">
         <li><a class="entypo-home" href="#">Home</a></li>
         <li><a class="entypo-briefcase" href="#">Services</a></li>
         <li><a class="entypo-picture" href="#">Portfolio</a></li>
         <li><a class="entypo-address" href="#">Contact</a></li>
</ul>

CSS
#nav ul li a {color:#ccc; margin-left: 25px;}
#nav [class*='entypo-'].active:before {color:#666;}
#nav [class*='entypo-']:before {font-size: 46px; position: relative; top: 5px;left: -3px; color:#999;}
[class*='entypo-']:hover:before {text-decoration:none !important;}

Your help is greatly appreciated!

csshtml

Answer №1

In my experience, the most effective method for getting rid of inherited styles on generated content is by setting its position: absolute. I have put together a simple demonstration in the code snippet below:

a:link {
    text-decoration: none;
    position: relative;
    margin-left: 1em;
}

a:hover {
    text-decoration: underline;
}

a:before {
    content: '#';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 1em;
}

Check out this JS Fiddle demo to see it in action.

One downside to this method is that you need to explicitly set a width for the generated content and the margin of the parent a element.

Answer №2

A different method to consider is enclosing the link text within a specific element, such as span. By doing this, you can remove the underline from the hyperlink and add it to the span when hovering over.

<li><a class="entypo-home active" href="#"><span>Home</span></a></li>

[class*='entypo-'] a { text-decoration: none; }
[class*='entypo-'] a:hover span { text-decoration: underline; }

Answer №3

It seems like the current solution is not effective. One alternative could be assigning the <li/> class and applying the :before property to it.

If you prefer not to implement the position: absolute method, you can view an example of my recommendation in this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Limit image size in Outlook when using Mailchimp

I'm currently working on coding a Mailchimp template for a client and I've run into an issue with image dimensions. The problem arises when images exceed the width of the template (usually 600px), as they are displayed at their original size in ...

htmlcssimageoutlookmailchimp

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

What is the best way to position the wizard on both the left and right sides of the screen

Currently, here's the code I have, and I want it to appear like this. What are the steps needed to adjust the CSS in order to achieve that? .nav-wizard { display: table; width: 100%; } .nav-wizard > li { display: table-cell; text-align: ...

csstwitter-bootstraptwitter-bootstrap-3

How can I link two separate webpages upon submitting a form with a single click?

Here is a snippet of my code: <form action="register.php" method="post"> <input type="text" name="uname"> <input type="submit" > </form> Within the register.php file, there are codes for connecting to a database. I am looking ...

javascriptphphtml

Challenges arise when using Bootstrap 4 for country selection

There have been reports that bootstrap 4 country select is not functioning properly. In an effort to troubleshoot, I delved into the documentation to find a solution. To make bootstrap-select compatible with bootstrap 4, refer to: Bootstrap 4 beta-2 ...

javascripthtmljquerycssbootstrap-4

The functionality of playing audio in HTML5 is only compatible with the Chrome browser

Having issues with sound not working in Firefox or Opera, only Chrome. I suspect it may be a compatibility problem between the sound format and the server setup. Is there a known pattern to address this? Should I include an Onload event? Below is the code ...

javascripthtmlaudio

Modifying HTML tag attributes with inline server scripts

I am working with a submit button and trying to change the background color of the button itself after it has been clicked using inline server tags. <form id="form1" runat="server"> <input type="submit" id="submit" value="Submit" runat="server"/& ...

asp.nethtmlwebforms

Instructions for creating a string builder append button that reveals a concealed modal

I'm attempting to add a button using a string builder to append the button in a placeholder. The button will be appended based on a value in the data table. The button append operation is working correctly, but the button's functionality to revea ...

htmlasp.netvb.netvisual-studiobootstrap-4

Cross-browser compatibility issues preventing CSS button effects from functioning properly

Experiencing some challenges with CSS Button effects not functioning consistently across different browsers. The display is satisfactory in Chrome, but not in Firefox. Struggling to pinpoint the source of the issue. Here is my current setup: Fiddle a ...

htmlcssbuttoncross-browser

Participant joins in the game table and reacts

I am looking to set up a table where players can join and have their usernames displayed at the bottom of the screen just like in other games. How can I achieve this? export const GameStart = (props) => { const params = useParams(); const gameID = p ...

javascriptcssreactjs

Troubleshooting a problem with updating Opencart status

Every time I attempt to update the order status in the admin panel of the order info view, it keeps getting updated as cancelled. Even when I click the add history button, it initially posts the order_status but ends up updating with the cancelled status. ...

phpjqueryhtmlajaxopencart2.x

How can we customize HTML images without allowing third-party JavaScript to enlarge them?

I am using Blogger to host my website and I have a basic knowledge of HTML and CSS. I want to incorporate a collaborative add-your-link feature using SimplyLinked. However... They provided me with the following HTML: <script type="text/javascript" src ...

javascripthtmlimagebloggerimage-size

Observe the input value that has been entered

Currently, my task involves: Inserting an email address into a form and having that email appear in the following <div class="your-mail"></div> tag Here is the existing HTML code: <div class="wrap"> <main> ...

javascripthtml

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

After implementing an autocomplete widget, I noticed that a dialog appears when an item is selected. However, I am struggling to get a specific field in the dialog to receive focus upon opening. Here is what I have attempted so far: //HTML <form actio ...

javascriptjqueryhtmljquery-ui

Managing Frameset, POST Requests, and Re-Directs like a pro

My current setup involves using FrameSets to split the screen into two sections. The left pane consists of links while the right pane displays actual pages. I am facing an issue with handling entry Forms that are opened on the right pane and submitted. Up ...

phphtml

Utilizing Bootstrap for Content Width as Opposed to Full Screen Width

I am currently utilizing Bootstrap 4, but I prefer not to rely on the screen width for my layout. Instead, I want it to adapt based on the width of a specific container. Despite my efforts in searching for a solution, I have been unable to find the necess ...

htmlcssbootstrap-4

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

javascriptjquerycssfluid-layoutmaterial-design

Images for the background of the table header and sorting icons

Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...

jqueryasp.netcss

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages

I've noticed a strange issue on my website where certain elements seem to be shifting slightly when navigating between different pages. Here's a quick video clip demonstrating the problem. It appears that these elements are not staying static as ...

cssnavigationwebhtml

Ensure one div scrolls independently while the other remains fixed using Bootstrap

I am currently in the process of constructing a web page with Bootstrap 4. The layout consists of two columns, each contained within individual divs. My requirement is for the content on the right side to be scrollable while the content on the left remains ...

javascripthtmljquerycssbootstrap-4