Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using display: block for the icon, it interferes with the hover effect on the text. How can I resolve this issue?

CSS:

/* You can add global styles to this file, and also import other style files */
.navbar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    position: absolute;
    width: 639.98px;
    height: 32px;
    left: 363px;
    top: 72px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-top: 72px;
}

.sobre {
    width: 108.1px;
    height: 32px;
    flex: none;
    order: 0;
    flex-grow: 0;
    color: white;
    font-family: 'Outfit', sans-serif;

    font-style: normal;
    font-weight: 900;
    font-size: 20.7558px;
    line-height: 28px;
    text-decoration: none;
    position: relative;

    /* Horizontal gradient */

    background-image: linear-gradient(90deg, rgba(251, 62, 107, 0.95) 10%, #8F00FF 91.6%);
    background-size: 40% 3px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
}

.sobreImg {
    display: block;
    position: absolute;
    left: 110px;
    top: 2px;
    visibility: hidden;
}

.sobreImg:hover {
    display: block;
    visibility: visible;
}

.sobre:hover {
    background-size: 100% 3px;
}

HTML:

<nav class="navbar">
  <a class="ferramentas" routerLink="/">tools
    <img src="../assets/icons/tools.svg" class="toolsImg">
  </a>
  <a class="contato" routerLink="/">contact
    <img src="../assets/icons/contact.svg" class="contactImg">
  </a>
  <a class="projetos" routerLink="/">projects
    <img src="../assets/icons/projects.svg" class="projectsImg">
  </a>
  <a class="sobre" routerLink="/">about me
    <img src="../assets/icons/aboutme.svg" class="aboutMeImg">
  </a>
  <a class="skills" routerLink="/">soft skills
    <img src="../assets/icons/soft.svg" class="softImg">
  </a>

</nav>
<router-outlet></router-outlet>
cssangular

Answer №1

If you want to enhance the style of the icons when hovering over the parent anchor tag, you can utilize a child combinator selector along with the :hover pseudo selector like this: .navlink:hover > .navlinkImg.

IMPORTANT: I made some adjustments to your HTML and CSS for better reusability, such as using a common .navlink class for the tags and incorporating .navlinkImg for the icons within each link.

/* You can apply global styles in this file, and import other style files as well */
.navbar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    position: absolute;
    width: 639.98px;
    height: 32px;
    left: 363px;
    top: 72px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-top: 72px;
}

.navlink {
    display: flex;
    width: 108.1px;
    height: 32px;
    flex: none;
    order: 0;
    flex-grow: 0;
    color: white;
    font-family: 'Outfit', sans-serif;

    font-style: normal;
    font-weight: 900;
    font-size: 20.7558px;
    line-height: 28px;
    text-decoration: none;
    position: relative;


    /* horizontal gradient */
    background-image: linear-gradient(90deg, rgba(251, 62, 107, 0.95) 10%, #8F00FF 91.6%);
    background-size: 40% 3px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
}

.navlink:hover {
    background-size: 100% 3px;
}

.navlink:hover > .navlinkImg {
  display: block;
  visibility: visible;
}

.navlinkImg {
    display: block;
    position: relative;
    visibility: hidden;
}
<nav class="navbar">
  <a class="navlink tools" routerLink="/">tools
    <img src="../assets/icons/tools.svg" class="navlinkImg toolsImg">
  </a>
  <a class="navlink contact" routerLink="/">contact
    <img src="../assets/icons/contact.svg" class="navlinkImg contactImg">
  </a>
  <a class="navlink projects" routerLink="/">projects
    <img src="../assets/icons/projects.svg" class="navlinkImg projectsImg">
  </a>
  <a class="navlink about" routerLink="/">about me
    <img src="../assets/icons/aboutme.svg" class="navlinkImg aboutImg">
  </a>
  <a class="navlink skills" routerLink="/">soft skills
    <img src="../assets/icons/softskills.svg" class="navlinkImg softskillsImg">
  </a>
</nav>

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

Master the art of directing your attention to a list element with ease using the tab function and jQuery

I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% ...

javascriptjqueryhtmlcss

The tab navigation feature is experiencing issues in Internet Explorer versions 7 and 8

I have successfully implemented a tab menu that functions well in Chrome and IE 9,10. However, it does not seem to work in IE 7 or 8. I am at a loss regarding what changes need to be made to my code. Could anyone provide assistance? Link to Code Example ...

jquerycsscross-browser

Setting the variable to global does not apply styling to the element

Looking for help with styling an element created using document.createElement("img")? let fireball; //global variable fireball = document.createElement("img") //variable on local fireballArray.push(someFunction(fireball, { src: "img.png&qu ...

javascripthtmlcssdomstyles

The Jquery UI confirmation dialog is working flawlessly on the Fiddle platform, but it is not displaying correctly on the

After testing this code snippet on a fiddle and seeing it work perfectly, I attempted to implement it on my website only to find that there is no border appearing, and the layout appears disorganized. Even after removing all the CSS styles and inspecting ...

jqueryjquery-uicss

Tips for creating a responsive floating page div

Hey there, I'm still fairly new to web development and have a question regarding a registration page that is displayed as a floating div above the main page. How can I ensure that this div is centered in a responsive way? The pages are separated and ...

htmlcss

Obtaining the checkbox status from a location other than immediately following the input by CSS alone

I am currently designing a custom checkbox feature where clicking on the label text will toggle the state and display or hide certain text based on the checkbox state, all achieved solely through CSS. The HTML code I have written for this purpose is as fol ...

csshtmlcheckbox

What is the best way to assign a value to an ngrx reducer/action in order to update the state?

As a newcomer to Angular ngrx, I am in the process of integrating it into my 'standard beginner-project' by replacing all @Input()s and @Output()s. While incrementing and decrementing the state is straightforward, I am faced with the challenge of ...

angularngrx-storereducers

Unlocking the Magic: A Step-by-Step Guide to Generating PDFs with

I'm currently engaged in developing an IONIC venture employing JavaScript and Angular. One of the tasks entails creating a comprehensive PDF report featuring text, images, and graphs. Instead of hand-crafting all the elements, I'm keen on adoptin ...

angularangularjspdfionic-framework

The call to 'setRequestHeader' on 'XMLHttpRequest' was unsuccessful due to the object's state not being OPENED

While developing an angular application with a restful API get(), I encountered a few errors such as unauthorization error:401 which I managed to resolve. However, now I am facing another error that seems quite straightforward. I even tried adding the CORS ...

angulartypescriptrestful-authentication

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

htmlcss

My React application is not showing the CSS styles as intended

In my project, I have a component file named xyx.js where I properly imported my scss file './xyz.scss'. Both of these files are in the same folder. Interestingly, when I view the styles using the Chrome scss extension, everything seems to be wor ...

htmlcssreactjssass

Looking to set up a layout with two columns in the first row and one column in the second row, then combine the two columns using HTML and CSS

My goal is to set up a layout with two columns in the first row, one at 70% width and the other at 30%, and a single column in the second row. However, when I add text and images, the content doesn't position as expected: body { background-image: ...

htmlcss

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

I recently created a basic drop-down list like this: https://i.sstatic.net/4Tlxx.png Here is the HTML code for it: <select class="form-control" id='0' (change)="retrieveValue($event.target)"> <option id='0'>{{ g ...

javascripthtmlangulartypescriptbootstrap-4

Angular: Converting JSON responses from HttpClient requests into class instances

I am facing an issue with the following code: public fetchResults(searchTerm: string): Observable<Array<SearchResult>> { let params = new HttpParams().set('searchTerm', searchTerm); return this.http .get<Array< ...

jsonangulartypescriptrxjsangular-httpclient

How to position one element relative to another using CSS

I need to strategically place four div elements in relation to another element. I have a rectangular div, and my goal is to insert four div elements at each of its corners. While I am aware of the CSS attribute "position: relative", it only allows me to ...

csscss-position

The 'background-size:cover' property does not function properly on iPad devices

Greetings! I have been working on developing a parallax website, and everything seems to be running smoothly across all browsers except for iPad. It appears that the background-size: cover property is not functioning properly on this device. Below is the ...

htmlioscssipad

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

javascriptcssreactjsnext.jstailwind-css

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

csscss-selectors

Utilize ngx-translate with an array as interpolation values

When working with ngx-translate, I use the instant method to translate messages into the user's language. These messages are provided as JSON objects and some of them contain dynamic values: { "message.key": "First value is {{0}} and se ...

angulartypescriptngx-translate

Despite an update to the observable in Angular, the subscription remains unexecuted

After using npm generate service, I have created an Angular service that functions as a singleton, allowing it to be utilized across the entire app. The service code snippet is shown below: @Injectable({ providedIn: 'root' }) export class Selec ...

angularobservable