XS✔ ◾ Added warning to not try other effects in text hover (#9755)

* Added warning to not try other effects in text hover

* Auto-fix Markdown files

* Update rule.md

* Add files via upload

* Update rule.md

* Auto-fix Markdown files

* Separated the section about non-links

* Auto-fix Markdown files

* added seo description

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

rules/underlined-links/rule.md

@@ -1,6 +1,7 @@
 ---
 type: rule
 archivedreason: 
+seoDescription: Hover effects on text links are a great way to enhance user experience and make your website more interactive. 
 title: Do you use underlines on links?
 guid: b55df040-7424-48e4-b19b-14d4bcdcfbc7
 uri: underlined-links
@@ -19,19 +20,12 @@ redirects:
 
 ---
 
-Ensure your links are easily distinguishable from the background and surrounding text by **always making them underlined**. Users expect underlined texts to be a link; and links to be underlined. 
+Ensure your links are easily distinguishable from the background and surrounding text by **always making them underlined**. Users expect underlined texts to be a link; and links to be underlined.
 
 <!--endintro-->
 
-Keep in mind:
-* Underlines are **not** necessary on obvious links, like menu items or buttons
-* **Never underline a text that isn't a link** - Use bold or another styling if you need emphasis.
-
-::: greybox
-When you develop on SharePoint, you <u>do not</u> have a full copy of web.config in your Visual Studio project.
-:::
-::: bad  
-Figure: Bad example - Never underline the text when it isn't a link  
+::: info
+**Note:** Underlines are **not** necessary on obvious links, like **menu items** or **buttons**.
 :::
 
 ::: greybox
@@ -45,9 +39,27 @@ Figure: Good example - The link is nice and clear
 **Tip:** You can [use a different color on underlines](https://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp) as a nice touch.
 :::
 
-### Mouse hovering effect
+## Never underline a text that isn't a link
 
-Rollovers are also important as they offer visual feedback to a user that this link that will take them somewhere. While there is a myriad of ways to do this; you can't go wrong with a color change. Hover the good example above to see this working.
+Use bold or another styling if you need emphasis.
+
+::: greybox
+When you develop on SharePoint, you <u>do not</u> have a full copy of web.config in your Visual Studio project.
+:::
+::: bad  
+Figure: Bad example - Never underline the text when it isn't a link  
+:::
+
+::: greybox
+When you develop on SharePoint, you **do not** have a full copy of web.config in your Visual Studio project.
+:::
+::: good  
+Figure: Good example - Using bold for emphasis  
+:::
+
+## Include a hovering effect
+
+Rollovers are also important as they offer visual feedback to a user that this link that will take them somewhere. While there is a myriad of ways to do this; color change is recommended because it preserves text readability. Hover the good example above to see this working.
 
 The basic CSS for changing the link color on hover is:
 
@@ -57,13 +69,23 @@ a:hover {
 }
 ```
 
-### CSS - Avoid borders on text
+### Avoid other effects on hover for text
+
+Effects like bold, scaling, rotation, or background changes can distort text, making it harder for users to read and interact with links.
+
+::: bad
+![Figure: Bad example - Using bold on hovering may cause a text shift](bad-example-bold-hover.gif)
+:::
+
+**Note:** These effects may be used for buttons or other non-text content elements.
+
+## Avoid replacing underlines with borders
 
 The default implementation of underlines in CSS is:
 
 ``` css
 text-decoration: underline;
-``` 
+```
 
 Another way to add look-alike underlines is by adding `border-bottom: 1px;`, for example. In this case, you can even have a dotted underline. However, it's **not recommended** you use this method unless you are a designer and know what you are doing. It may create extra pixels in the interface, which can potentially cause other problems in your UI: