Edit - Stack Overflow

Skip to main content

1. Home
2. Questions
3. AI Assist
4. Tags
5. Challenges
6. Chat
7. Articles
8. Users
9. Companies
11. Communities for your favorite technologies. Explore all Collectives
Stack Internal

Stack Overflow for Teams is now called Stack Internal. Bring the best of human thought and AI automation together at your work.
Try for free Learn more
Bring the best of human thought and AI automation together at your work. Learn more

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Title*

Body*

This CSS transition works in Gecko (Firefox) and WebKit (Safari) browsers but not in Chromium. Is it a Chromium bug or is there a more specific implementation to make this work?
I can't find anything about this issue in the Chromium issues or anywhere else. Surely I am not the first one trying to transition `text-decoration-thickness`...?





 a {
 /* the line below (or similar) was missing
 from the original question,
 but it is critically important to reproduce
 the effect — SA
 */
 text-decoration: underline; 
 text-decoration-skip-ink: none;
 text-decoration-thickness: 2px;
 transition: text-decoration-thickness 1s;
 }
 a:hover {
 color: red;
 text-decoration-thickness: 10px;
 }




 <!DOCTYPE html>
 <html>
 <body>
 	<a>This is an anchor</a>
 </body>
 </html>



Important note: I am not looking for a workaround to make lookalike text decoration. I am questioning spec compliance.

Draft saved

Draft discarded

Tags

Edit Summary*

Cancel

5

Yes, I get the same behavior (no animation) on Edge on Windows11 - as you'd expect if Chrome has a problem. FF on W11 does animate. As it's supposed to be animatable (according to MDN at least) then I think you are probably right about non-compliance.

A Haworth
– A Haworth

2025年08月27日 07:37:23 +00:00
Commented Aug 27, 2025 at 7:37
BTW, if you make your code into a runnable snippet you may find more people try this out for you.

A Haworth
– A Haworth

2025年08月27日 07:38:23 +00:00
Commented Aug 27, 2025 at 7:38
Okay, I edited the source code and re-worked it into a snippet. The sample was not correct. The decoration itself was forgotten. I added text-decoration: underline. Now it works, in particular, with Firefox. Indeed, with the browsers based on V8+Blink engines (Chromium-based) it shows the effect, but without the delay, that is, without animation. I think the issue can be closed at this point.

Sergey A Kryukov
– Sergey A Kryukov

2025年08月27日 18:55:20 +00:00
Commented Aug 27, 2025 at 18:55
The text decoration, underline, is normally there by default on an anchor element so it’s strange you had to specify it, @sergeyAKryukov

A Haworth
– A Haworth

2025年08月27日 20:52:18 +00:00
Commented Aug 27, 2025 at 20:52
@A Haworth — Only no effect is shown without one of the text-decoration non-default values. As you can see, I've used anchor, but without href. Generally, relying on such a default is an invalid thing. Also, it is not relevant to the issue. You have to reproduce it, that is what matters.

Sergey A Kryukov
– Sergey A Kryukov

2025年08月27日 21:32:31 +00:00
Commented Aug 27, 2025 at 21:32

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
asking help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

default