When using a custom selection color to highlight underlined text, the underline becomes invisible

I am currently working on a website where I want to customize the text selection color.

::selection {
    background-color:#00ffff;
}

However, there seems to be an issue in this specific situation:

p::after {
    content:"Try selecting the above elements. The underline does not remain preserved, but the italic formatting is maintained."
}
::selection {
    background-color:#00ffff;
    text-decoration:auto;
}
<u>Select me!</u>
<i>Select me!</i>
<p></p>

So, how can I ensure that the underlined text remains preserved when selected?

Update:
I am using Chrome 92.0.4479.3 (canary build) on Microsoft Windows 10 Home.
Screenshot:

https://i.sstatic.net/hx295.png

htmlcssselection

Answer №1

To change the appearance of the selection, adjust the background-color using rgba, hsla, or hex code with extra digits for alpha transparency. A lower alpha value, like 0.5, worked best for me as it prevents the selection from hiding the underline. Experimenting with different alpha values can help achieve the desired effect.

Answer №2

Try using 'inherit' instead of 'auto' for text-decoration in your CSS code:

::selection{
      background-color: #00f;
      text-decoration: inherit;
    }

By doing this, the text-decoration property will be inherited from the parent element.

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

Accessing video durations in Angular 2

Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...

htmlangulartypescript

Insert this HTML table along with radio buttons into an Excel spreadsheet

My HTML table contains rows with a variety of content, including plain text characters and elements like radio buttons and lists. I want users to be able to copy-paste the table into MS Excel as plain text and have the radio button values replaced with "c ...

javascripthtmlexcel

Is there a simple and efficient method to transition the loading of a regular website to AJAX for the entire site?

Is it feasible to easily and quickly change all links on a website to load the URL that the user clicked via AJAX, rather than refreshing the webpage? My website currently has standard links, but in order to create a mobile application for iPhone, I need ...

javascriptajaxhtmlhtml5-history

Adjusting the ng-bootstrap carousel to fit within a div inside an ng-bootstrap modal

I have been struggling to correctly adjust the CSS properties in order to make a ng-bootstrap carousel image fit into a specific space (div) within a custom ng-bootstrap modal. Take a look at this modified StackBlitz code. In the provided example, the ima ...

htmlcssangularbootstrap-4ng-bootstrap

The mobile version of my website's home page is not displaying certain elements of the featured image

I'm in the process of launching a fresh new blog with Flask as the backend. Currently, I'm using a Bootstrap template and have set an image as the featured image. While it displays properly on computers, tablets crop it out. You can check out the ...

htmlcssflaskbootstrap-4web-deployment

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

node:internal/modules/cjs/loader:1051 throw err; ^ Error: The module '/Users/ben/Desktop/GA/unit2/week5/GA_Project_2/QuotaQuest/index.js' cannot be found. at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Modul ...

javascripthtmlnode.jsmongodbexpress

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...

htmlcssvalidation

What is the best method in JavaScript to create three different shades of a color?

My sass function generates lighter and darker versions of a base color, here is the code snippet: $colors: ( betpawa-green: #107A3D, lime-green: #8DC63F, yellow: #FBCD00, ); @mixin color-generator { @each $name, $hex in $colors { &-#{$nam ...

javascripthtmlfor-loopsasstemplate-literals

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

htmlcsscss-shapes

What is the best way to display grouped items horizontally in an ASP.NET ListView?

My ASP ListView currently displays items vertically in columns with GroupItemCount set to 3: A D G B E H C F I Is there a way to adjust the display so that it groups items horizontally in rows like this? A B C D E F G H I This is the ListVi ...

.netasp.netcsslistviewhtml

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

javascripthtmlvue.jsvuejs2vue-component

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

In the array below, there are three post photos. When I click on each post button, I should see a corresponding post photo div at the bottom for each post. Issue: I am facing a problem where only one post photo div is being displayed, which keeps replaci ...

cssreactjs

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

Is XPath applicable to data that has been labeled?

I am looking to access the data within the second div: <div class="my-3"> <div class="d-flex justify-content-between">Monthly:</div> <div>0 / 30,000</div> </div> Within the code above, I want to t ...

htmlxmlxpath

Using select tags in conjunction with JavaScript can add dynamic functionality to your website

I've been working on adding dropdown menus to my website and have been using code similar to this: <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</opti ...

javascripthtmlselect

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...

htmlcss

The "hidden" class in Bootstrap 4 is not functioning as expected

I have Bootstrap v4 set up with its default CSS and JS. I'm attempting to use the classes hidden, hidden-XX-down, and hidden-XX-up on different divs, buttons, etc. However, it doesn't seem to be having any effect. All other classes are working fi ...

csshtmltwitter-bootstrapbootstrap-4

How can I close the menu when a menu item is clicked in a React.js application?

I am facing an issue where I want to close the menu when clicking on any menu item in React JS. The functionality works fine with a button icon but not with individual menu items. How can I resolve this problem? I have been trying to implement it using CSS ...

javascriptcssreactjs