Title: Underline text with line when selected
Tags: javascript;html;css;selection;underline
Question: The idea:
I want to have the text underlined (preferably in a color gradient like here) when selecting a text section instead of changing the background. According to Mozilla ```text-decoration``` is possible, so also ```text-decoration: underline```.
The problem:
(```text-decoration``` with ```181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16selection``` does not work for me (Chrome &amp; Edge) - solved).

The solution idea:
Is it at all possible to underline the text as a gradient when making a selection (in CSS)? One idea of mine is to use ```JavaScript``` to see if the text is selected and then add an ```id=&quot;underline&quot;``` or so between the text, which then contains the CSS code for the gradient line.



Progress:
The whole thing is not achieved with pure CSS. I have now changed the code, so that when a selection is also the text is suitably underlined.
Problem with the progress:
The line remains even after clicking away the selection.
The current code:


```    function wrapSelectedText() {       
        var selectedText = window.getSelection().getRangeAt(0);

        var selection = window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        /* Styling */
        span.style.backgroundImage = "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)";
        span.style.backgroundRepeat = "no-repeat";
        span.style.backgroundSize = "100% 0.2em";
        span.style.backgroundPosition = "0 88%";

        span.appendChild(selectedText);
        selection.insertNode(span);
    }

    document.onmouseup = document.onkeyup = document.onselectionchange = function() {
        wrapSelectedText();
    };```
```181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16selection {
  background: none;
}```
```<p&gt;This is an example text.</p&gt;```






Here is another answer: The text-decoration needs to exist already on the element, by defining ```text-decoration: underline overline transparent;``` on the ```p``` element it does work.


```181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16selection {
  background: yellowgreen; /* To check if the text is selected */
  text-decoration: underline overline #FF3028; /* Only works on elements that have the same decoration properties set already */
}

p {
  color: black;
  font-size: 18px;
  text-decoration: underline overline transparent;
}```
```<p&gt;This is an example text.</p&gt;```




Comment for this answer: Thank you, that helps me a lot :) To underline only the part that is also marked, you most likely need JavaScript then, I guess
Comment for this answer: @JueK3y indeed because underline applies to the entire node, in order to accomplish this (and any fancy custom styling like the gradient you want) you could wrap the selected text with an inline element (use the ‘mark’ tag and style it with a class). The JS solution is described in the following SO: https://stackoverflow.com/questions/6328718/how-to-wrap-surround-highlighted-text-with-an-element/6328906#6328906

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:07/15/21', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><html><css><selection><underline>', 'Title': 'Underline text with line when selected', 'ViewCount': 1082, 'id': 68392935, 'user_AboutMe': '<h2>Hi there,  I\'m <a href="https://juek3y.com" rel="nofollow noreferrer">JueK3y</a></h2>\n<h3>⚡ Quick Info</h3>\n<ul>\n<li> I\'m a self-taught front-end developer with the main focus on:\n<ul>\n<li>HTML5, CSS and JS (including jQuery)</li>\n<li>Python</li>\n<li>Java</li>\n</ul>\n</li>\n<li> I’m currently working <a href="https://juek3y.com" rel="nofollow noreferrer">on my own Website</a> and <a href="https://github.com/JueK3y/Instagram-automated-commenting" rel="nofollow noreferrer">IAC 2.0</a>.</li>\n<li> I recently programmed my first Instagram bot. <a href="https://github.com/JueK3y/Instagram-automated-commenting" rel="nofollow noreferrer">Check it out!</a> Or see the <a href="https://github.com/JueK3y/Instagram-automated-commenting/releases" rel="nofollow noreferrer">latest releases</a>.</li>\n<li> The best way to reach me is <a href="https://juek3y.com/de/contact" rel="nofollow noreferrer">via my website</a>.</li>\n</ul>\n<br>\n<h3> Visit me on other platforms:<br></h3>\n<p><a href="https://www.linkedin.com/in/julian-kennedy-907394200" rel="nofollow noreferrer">LinkedIn</a>  |  <a href="https://www.instagram.com/jueK3y/" rel="nofollow noreferrer">Instagram</a>  |  <a href="https://github.com/JueK3y/" rel="nofollow noreferrer">GitHub</a></p>\n', 'user_AccountId': 20291879.0, 'user_DisplayName': 'JueK3y', 'user_Reputation': 217.0, 'user_Views': 31.0, 'user_id': 14883370.0}}