Is it possible to update the underline color using CSS in Google Chrome?

I have been attempting to modify the color of the underline during a hover event by using spans. Surprisingly, it seems to be working fine in IE9 and Firefox 13.01, but unfortunately, it doesn't work properly in Chrome (it should be underlined in gold).

#menu li:hover span.underline {
    text-decoration:underline;
    color: #FAA301;  }

<ul id="menu">
    <li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li>
    </ul>

For reference, here is the link to the js.fiddle with the code sample: http://jsfiddle.net/wuUpL/7/.

The initial inspiration for this approach came from a post on Stack Overflow (), but even that method doesn't seem to resolve the issue in Chrome.

Please bear in mind that I prefer not to use borders as a fix since they are already being utilized for border-related purposes.

If anyone has any suggestions or solutions to rectify this problem, particularly in Chrome, I would greatly appreciate the assistance.

htmlcssunderline

Answer №1

Even though you mentioned avoiding borders in this situation, a discrepancy has been identified between the two browsers.

To resolve this issue on Chrome, try incorporating an inner span with a border applied to it.

http://jsfiddle.net/wuUpL/10/

I apologize if this solution is not what you initially had in mind, but it seems that Gecko and WebKit are at odds over something here!

Answer №2

It's interesting to note that typically, setting different text colors for parent and child elements to achieve differently colored underlines usually works in Chrome. However, there appears to be a strange bug related to link decoration inheritance in Chrome:

u {
  text-decoration: underline;
  color: red;
}
u:hover {
  text-decoration: overline;
  color: green;
}
u * {
  text-decoration: none;
  color: black;
}
u:hover * {
  text-decoration: none;
  color: gold;
}
<p>
  <u>
    Parent with decoration.
    <span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span>
  </u>
</p>
<p>
<p>
  <u>
    Parent with decoration.
    <a href="#">Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.</a>
  </u>
</p>

What's peculiar is that despite having the same computed style in Chrome for both innermost elements (as per Dev Tools), it seems there may be no immediate solution to this issue.

In the future, utilizing a single element and the text-decoration-color CSS property could potentially provide a workaround.

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

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

How about incorporating AJAX into your HTML code?

I am currently in the process of developing an email system for a company that wishes to use it for sending emails. To achieve this, I have implemented a custom HTML editor for creating email content. My goal is to post the email contents to an external PH ...

phpjquerymysqlhtmlajax

I am struggling to set a required input in Angular2

I am new to Angular and currently working on a project that requires input validation to ensure that no field is left blank. The project consists of an HTML file along with a .ts file for functionality. Below is a snippet from the HTML: <div class="f ...

javascripthtmlangularangular2-ngmodel

The GIF Loader fails to animate while an AJAX request is in progress

Displaying a DIV element containing a loading GIF image while waiting for an AJAX call response. Initially, the DIV element is hidden. Upon clicking a checkbox, the loader DIV is shown, followed by the completion of the AJAX call, and then hiding the load ...

javascriptjqueryhtmlajaxanimated-gif

When utilizing ThreeJS video texture, it is necessary to ensure that CORS headers are included, regardless of whether the <video> tag typically requires it or

I am facing an issue with my localhost web server where a remote video from Firestore Storage is being played on a page using a <video> tag. The video plays correctly on the web page. However, I am now trying to use the same video as a texture in a T ...

htmlvideothree.jscorsfirebase-storage

Issue with arranging blocks in a horizontal line in Opera

I am currently experiencing an issue with a wide page that contains an information block and numerous images positioned to the right. The layout is designed to be used with a horizontal scrollbar. While this setup works perfectly in Firefox, Safari, Chrom ...

htmlcssoperahorizontal-scrolling

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Within the "additionalForm" group, there is a formArray named "validations" that dynamically binds values to the validtionsField array. The validtionsField array contains three objects with two values that need to be compared: Min-length and Max-Length. F ...

javascripthtmlcssangulartypescript

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

The function nivoSlider cannot be found in the selected element

I'm having trouble integrating Nivoslider into my website, it's not working for me. Can someone please help me with this issue? Interestingly, it's working fine on my local machine but not on my server. I have tried other suggested solutions ...

html

What is the best way to incorporate the parallax effect into a v-carousel?

Currently, I have a "v-carousel" containing multiple images and now I am looking to incorporate a parallax effect into it, similar to "v-parallax". <v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover> <v-carousel-i ...

cssvue.jsvuetify.js

Dynamic Navigation Menu: Subcategories Crossing Over Menubar Items

Task Clarification Lately, I've been working on developing a left-side navigation bar for my webpage. This bar consists of two levels of items. When viewed on a smaller device, only the icons of the first level appear. Hovering over these icons trigg ...

htmlcssnavigation

Integrate div columns within the content of Bootstrap tabs

Utilizing the X-tabs plugin, I have been working with Bootstrap 3 tabs and styling them as shown below: HTML : <div class='tabs-x tabs-below'> <div id="myTabContent-2" class="tab-content"> <div class="tab-pane fade in ...

jqueryhtmlcsstwitter-bootstrapbootstrap-tabs

Tips for detecting the height of a row with 2 columns in CSS

I am attempting to create two text/image boxes side by side, where one box dictates the height of both on desktop. In this scenario, the leftcol box should expand its background color to match the size of rightcol and center the content. On mobile devices, ...

htmlcssflexbox

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

javascriptjqueryhtmlcss

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Is it possible to use the 34 Responsive Grid system to create a column that takes up two-thirds of the full width? Although the Grid System has equal columns settings, I'm curious how to combine or merge two columns together? <div class="containe ...

css34grid

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

javascriptcsstinymce

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

javascriptjqueryhtmlcss

Providing a bottle-themed image

I'm encountering some challenges trying to show an image in my bottle app. This is how my folders are structured: project| --|views --|controllers --|static --|img --myimage --|models For the client side, I&apo ...

pythonhtmlwebbottle

Using HTML and CSS to stack a DIV on top of another using z-index

I have 3 main layers on my website: 1) The main view with elements inside (#views in jsbin) - BOTTOM LAYER 2) An overlay (with a white background opacity of .8 #overlay in jsbin) - MIDDLE LAYER 3) A context menu (#contextmenu in jsbin) - TOP LAYER Wh ...

javascripthtmlcssz-index

Disable button not necessary when validating checkboxes

I'm working on a simple function that involves 3 checkboxes. The goal is to disable the button if all checkboxes are unchecked, and enable it only when all three checkboxes are checked. function checkAll() { var checkbox1 = document.getElem ...

javascripthtmlcss