I am currently working with CSS to apply an underline effect underneath a span element:
CSS:
.un {
text-decoration: none;
transition: all .5s ease-in;
}
.un:hover {
text-decoration: underline;
}
HTML:
<span class="un"> Underlined Text - Or to be underlined </span>
The underline is not transitioning over the specified 0.5-second duration as defined in the transition property. How can I troubleshoot and fix this issue?
The support and flexibility of text-decoration-color have significantly improved, with most common browsers now able to handle it effectively. For projects that don't require IE support, this can be a great option. Check out this answer below if you're only interested in a color transition.
If you want to change the color of the text-decoration without affecting the font color, one workaround is to use pseudo elements:
.un {
display: inline-block;
}
.un::after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover::after {
width: 100%;
}<span class="un">Underlined Text - Or to be underlined</span>This method offers extensive customization options, allowing for various transitions. Another simple approach is using a border for basic underlining:
.un {
transition: 300ms;
border-bottom: 1px solid transparent;
}
.un:hover {
border-color: black;
}<span class="un"> Underlined Text - Or to be underlined </span>An effective solution for styling multi-line text without the need for a border-bottom mockup involves utilizing the text-decoration-color property.
It's important to note that this method may not be fully supported by older web browsers, as indicated in this resource.
.underlined-text{
text-decoration: underline;
text-decoration-color: transparent;
transition: 1s;
/*additional rules for Opera and Mozilla*/
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
}
.underlined-text:hover{
text-decoration-color: red;
/*additional rules for Opera and Mozilla*/
-webkit-text-decoration-color: red;
-moz-text-decoration-color: red;
}<span class="underlined-text">You're the greatest thing that has ever been or ever will be. You're special. You're so very special. It is a lot of fun. You don't want to kill all your dark areas they are very important. In your world you can create anything you desire.</span>Dealing with a similar dilemma involving a elements led me to an enlightening revelation.
The primary reason for the lack of animation stems from the inability to transition directly from a text-decoration: none setting.
To rectify this, I resorted to assigning text-decoration-color as transparent, and upon hovering, altering it to my desired color value.
In your specific scenario, specifying
text-decoration: underline transparentspan tags given their default text-decoration state of none. Subsequently, on hover, define the preferred text-decoration-color.
It's worth noting that both text-decoration and text-decoration-color are recognized as animatable properties by MDN.
References:
Shoutout to @Jacob for his clever answer. However, I stumbled upon a solution that seems to be quite unique:
.un {
transition: .4s;
}
.un:hover {
box-shadow: 0 3px 0 #7f7f7f;
}<span class="un"> Underlined Text - Or to be underlined </span>Utilizing box-shadow without blur can create an underline effect that is both intricate and special.
It's worth noting that using this technique excessively may potentially slow down your webpage.
If you prefer, you have the option to use border-bottom in place of underline:
.un{
border-bottom: 1px solid transparent;
transition: all .5s ease-in;
}
.un:hover{
border-bottom: 1px solid black;
}<span class="un"> Underlined Text - Or to be underlined </span>If you're looking to incorporate a subtle fade animation into your underlined text, consider this workaround:
.underlined {
text-decoration: underline;
text-decoration-color: #0000;
transition: all 0.2s ease-in-out;
}
.underlined:hover {
text-decoration-color: #000;
}
Instead of relying on the all-or-nothing property of text-decoration, consider utilizing a border-bottom for creating underlines more selectively. Here’s an example of how this can be achieved:
.highlight {
border-bottom: 1px solid transparent;
transition: border-color 0.5s ease-in;
}
.highlight:hover {
border-color: blue; /* choose a color that complements your text */
}You can apply the <span class="highlight">“highlight” class to text</span> to add a fading underline effect using CSS.By transitioning the border color change from transparent to match your text color, you can achieve a smooth “fade in” animation effect going from no underline to underline.
To achieve an underline effect with increasing width as shown below, utilizing the background-image property is recommended.
.un {
display: inline;
background-image: linear-gradient(#e876f5, #e876f5);
/* ↓ height of underline */
background-size: 0% 2px;
/* ↓ y position of underline. you can change as 50% to see it. */
background-position: 0% 100%;
background-repeat: no-repeat;
transition: background 0.3s linear;
}
.un:hover {
background-size: 100% 2px;
}<span class="un">hover me</span>This technique proved to be the most effective for me, offering a clean and straightforward solution. The transition effect is only visible after selecting a specific color.
@ref: https://www.example.com/css3_pr_transition-effect
a {
color: #333;
-webkit-text-decoration: none transparent;
text-decoration: none transparent;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a:focus,
a:hover {
color: #333;
-webkit-text-decoration: underline #333;
text-decoration: underline #333;
}
To achieve this effect, you can use CSS animations on the text-decoration-color property.
I have tested this in Chrome, Firefox, and Safari to ensure compatibility.
.un {
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 1s;
}
.un:hover {
text-decoration-color: currentcolor;
}<span class="un">Underlined Text - Or to be underlined</span>(This feature is now possible as Internet Explorer has reached End of Life status.)
I made a simple adjustment to bring the border up higher.
<style type="text/css">
a {
text-decoration: none;
border-bottom: solid 1px transparent;
font-weight: 600;
color: rgb(126,93,142);
-webkit-transition: all .5s;
transition: all .5s;
display: inline-block;
line-height: 1em;
}
a:hover {
text-decoration: none;
border-bottom: solid 1px;
color: #ce40ce;
display: inline-block;
line-height: 1em;
}</style>
<a href="#">La La La</a>
I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...
https://i.sstatic.net/sTWRu.png Can you help me with adding an icon to a list item using Font Awesome or any other method? I want the icon to appear on the right side of the text. I have four sections of text that I want to convert into expandable dropdow ...
When attempting to dynamically add YouTube videos to my React Native app, I decided to utilize a combination of WebView and iFrame due to the incompatibility of the current react-native-youtube component with RN 16+. Although this solution works, the ifram ...
I have a set of four buttons that I want to toggle and activate upon clicking them. Currently, the buttons toggle when double-clicked. My desired solution is for the button current btn to be highlighted and display data when clicked, and for the previous ...
Currently, I am setting up a search form and I require dynamically created divs to display the search results. The approach I am taking involves: Creating the necessary HTML elements. Cloning the structure for each result and updating the content of ...
Creating a drop-down menu using HTML: <ul> <li><a href="index.php">Home</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#features">Services</a></li> <li& ...
In my current HTML project, I am facing a challenge where I need to create an XPath expression to locate all instances of the "A1" text and extract the href attribute from each element on the page. Even though there are multiple occurrences of "A1" through ...
As I reviewed some sample code today, I noticed the developer opted to use a "+" instead of a "," to select two classes. .region + .region{ border-left: 1px solid lightgray; padding-left: 3.5%; margin-left: 4%; } I'm curious about what t ...
It seems like my button text appears fine on Safari, but in Google Chrome the issue arises. When you first arrive at the button, everything looks okay. However, after navigating through more posts and encountering the load more button again, the text gets ...
I am trying to fetch data from a database in my view using ajax, but I am getting the following error message: DataTables warning: table id=users - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please ...
Encountering a peculiar issue specific to Chrome (no problems in FF and Safari, not concerned about IE) that raises questions regarding whether it's a bug, incorrect usage of pseudo elements, or the compatibility of combining pseudo classes and pseudo ...
I have encountered an issue with the two buttons placed inside my header. Whenever I click on either button, the content displayed remains the same. https://i.sstatic.net/fk4V8.png https://i.sstatic.net/TCL7H.png It seems that when I click on one button, ...
I need help placing a textarea at the bottom of a fixed div: <div id=msg> <div id=content> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> </div> <div id=text> <textar ...
On my webpage, I am trying to utilize ng-repeat with an array like the one below: var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}]; I want to have a button that, when clicked, sends eit ...
Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...
Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...
I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...
As a newcomer to vue.js, I am facing a challenge in dynamically displaying images. Manually changing the images works fine, but I'm running into issues with dynamic display. I've come across similar problems online, but none of the solutions seem ...
My system is currently running Netbeans 8.0.1 and PhoneGap 3.5.0, but I am facing an issue where Netbeans does not allow me to create a new PhoneGap/Cordova project. According to some sources, this could be due to PhoneGap changing its versioning format, ...
I came across a question similar to this one My goal is to eliminate the dropdown menu from the column headers and align the text of the headers to the right. .ui-grid-header-cell { text-align: right; } However, my current attempts result in the disap ...