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

Ways to employ a Hyphen(-) to connect two strings within an ngIf condition in Angular 9

I'm dealing with an IF condition in HTML that checks for permission to access a specific page: *ngIf="permission?.product-report?.list_product_report" The name "product-report" is static and directly used in the condition. However, whe ...

angularangular-ng-if

Is there a way to turn off Emmet's CSS Abbreviations feature in Sublime Text 2?

One thing I really enjoy is how Emmet can generate HTML using 'CSS-like' strings. However, I prefer not to use their CSS Abbreviations. For example, when I write the following line of CSS: li a| I expect to get a tab when I press 'TAB&apos ...

htmlcsssublimetext2emmet

Would it be possible for me to adjust the CSS to center the sections?

I'm facing an issue with the layout of my website at . At the bottom, there is a navigation menu and three boxes with images. However, they are currently left-aligned instead of centered. Can anyone suggest CSS code that I can use to center them? Her ...

css

Why use @media (max-width:-1) in your code?

While reviewing CSS code created by another department, I noticed an interesting media descriptor: @media (max-width:-1) { ...standard css stuff here } The value of max-width cannot be less than 0, so what could be the purpose of this? Perhaps it was ...

css

Troubleshooting Angular applications in Rider

After conducting some research online, I stumbled upon a method to debug Angular apps in Rider. However, the process doesn't quite sit well with me due to its complexity for such a simple task. Thus, I am reaching out here to inquire if this approach ...

angularwebstormriderrun-configurationangular17

Exploring .ENV Variables using Angular 2 Typescript and NodeJS

After completing the Angular2 Quickstart and tutorials, I'm now venturing into connecting to a live REST Api. I need to include authentication parameters in my Api call, and from what I've gathered, it's best practice to store these paramete ...

swiftnode.jstypescriptangularnpm

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

I have encountered a challenge that I need help with. On a webpage, there are multiple images of varying sizes. I am looking to create a feature where hovering over an image triggers the appearance of a div above it containing a button and text without dis ...

htmlcssbootstrap-4

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

After researching about the @Input() and @Output() decorators, I discovered that we have the option to use an alias instead of the property name for these decorators. For example: class ProductImage { //Aliased @Input('myProduct') pro ...

javascriptangulartypescript

Setting a div's background using JavaScript works flawlessly on jsfiddle.net, but encounters issues when implemented in actual code

contains the files you need. For reference, here is the link to the code on I have attempted to remove all unnecessary elements from the actual project, but it has not made a difference. document.getElementById("image").style.backgroundImage = "url(" + d ...

javascripthtmlcss

Customizing SwiperJS to display portion of slides on both ends

I need some assistance with my SwiperJS implementation to replace existing sliders on my website. The goal is to have variable-width slides, showing a landscape slide in the center with a glimpse of the preceding and following slides on each side. If it&ap ...

javascriptjquerycsssliderswiper.js

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

htmlcssfont-size

Angular CRUD Form Data Conversion Update

After selecting the date 3/2/2021 in my Angular create CRUD form, it gets passed to MongoDB as 2021-03-02T00:00:00.000+00:00 and then displayed on the update CRUD form as 2021-03-02T00:00:00.000Z. How can I convert this to 'M/d/yyyy' format? (I ...

angularmongodbdatecrudutc

After the component has been initialized for the second time, the elementId is found to be null

When working with a component that involves drawing a canvas chart, I encountered an issue. Upon initializing the component for the first time, everything works fine. However, if I navigate away from the component and return to it later, document.getElemen ...

javascriptangularcharts

What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have: The display looks optimal with high-resolution landscape photos. This is the HTML and CSS code in use: <div class="upload-thumb ng-scope visible"> <span class="delete-media"> <span class="icon-bin ...

javascripthtmlcss

template for login page with google closure UI design

Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...

htmlcssgoogle-closuregoogle-closure-library

Generating a fresh object from an existing object by incorporating updated values using Angular and Ionic version 3

Currently, I am actively working on an Ionic 3 project that utilizes Angular framework. Within my project, I have a JSON object called 'person' which consists of data fields such as name, job, and home. One feature in my app is an Ionic toggle b ...

javascriptangularionic3

Creating a downloadable text file in Angular

I need help with including data retrieved from an API GET call into a text file within my project. I have successfully called the API, displayed the data on the console and the webpage, but now I am struggling to save this data into a text file. Below is t ...

angularapitext-files

Managing the behavior of screen readers when interacting with forms

I have a form in my Angular 2 application with input fields. The JAWS 18 screen reader reads the input fields one by one when the page is loaded. I want to customize this behavior so that the screen reader only mentions the form and then stops. I tried u ...

angularaccessibilityjaws-screen-reader

The animation of a disappearing div with CSS is not stopping when hovering over it

Hello, I've been working on a snackbar feature that appears and disappears on a set timer but also needs to pause when hovered over. Unfortunately, the current setup with setTimeout and useState is causing issues with this functionality. I have looke ...

javascripthtmlcssreactjs

Can you provide me with instructions on how to change the background image?

Having trouble with the CSS code I wrote for a background-image. It's not showing up when I set it in my CSS stylesheet. I tested it and found that it only works when written in the body... <body background="Tokyo.png"> ...but not in the styl ...

csshtml