Using CSS to Style Elements with ::after and ::selection

I have been attempting to create a selector similar to this, but so far without success:

.something::after::selection

Essentially, I am already utilizing ::after to add content, specifically an image. However, I would like to prevent the user from selecting this image and seeing an unsightly blue background.

Typically, I can achieve this using the following code:

.something::selection
{
    background-color: transparent;
}

Unfortunately, it doesn't seem to work well in conjunction with ::after.

Has anyone else encountered this issue before or found a solution?

htmlcss

Answer №1

It is not possible to customize the effect on selected images in Firefox as it is system-specific and cannot be changed at this time.

*updated

Answer №2

If you want to prevent images from being selected, you can achieve this using the following CSS code:

img { 
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}

You can also check out the updated jsfiddle example.

For applying styles with ::after pseudo-element, refer to this jsfiddle demo.

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

Checkbox: Activate button upon checkbox being selected

On my webpage, I have a modal window with 2 checkboxes. I want to enable the send button and change the background color (gray if disabled, red if enabled) when both checkboxes are selected. How can I achieve this effectively? HTML: <form action="" me ...

javascriptjqueryhtml

Filestack - NoCrop: Utilize whitespace to maintain the square aspect ratio when uploading images without cropping

Is there a way to use Filestack to upload an image and automatically add whitespace to the sides of the image in order to keep it square without cropping? click here for image ...

htmlapifilefile-upload

Tips for preventing text from shifting once a border has been applied

Is there a way to create a navigation bar that adds a border upon hovering without the text shifting every time the border is added or removed? function navigateToHomePage(){ window.location.replace("..."); }; $(document).ready(function(){ $(".n ...

javascripthtmlcss

Is there a way to achieve a XNOR-like response with necessary input?

I'm currently working with a form that looks like this: <form> <input type="text" name="input1"> <input type="text" name="input2"> <button type="submit"> ...

javascripthtmlformsbootstrap-5

Delivering JSON and HTML safely to JavaScript applications

As I brainstorm secure methods for delivering HTML and JSON to JavaScript, my current approach involves outputting JSON in this manner: ajax.php?type=article&id=15 { "name": "something", "content": "some content" } However, I am aware of the ...

phpjavascripthtmlajaxsecurity

Retrieve the values and IDs for every span element within the form

I have been attempting to retrieve all span elements within a form and make them editable input text fields. Once you click away, they should revert back to span elements. I will provide a live example in the attached fiddle. I tried my hand at it, but the ...

javascriptjqueryhtml

Is it possible to create a popup without using JavaScript?

Is it feasible to create a popup window without utilizing JavaScript by using the href tag or a similar method? For example, could something like <a href="popup:http://stackoverflow.com">Stackoverflow Popup</a> be used where the popup: functio ...

htmlhref

Finding the index of a table cell's column is a simple task that can be

Is there a way to retrieve the column index of an HTML table element using jQuery? Below is my HTML code snippet: table { border:1px solid navy; width: 70%; text-align: center; } table th { text-align: center; width:100px; height:20px; } table td { widt ...

jqueryhtml

Transition effects in the gallery are only triggered once all images have been seen

*Update 2 After identifying that the images were not fading in/out due to being considered unloaded, I resolved the issue by incorporating the initial 3 lines of jQuery code. I anticipate refactoring this and will provide an update once completed. JSFidd ...

javascriptjqueryhtmlcss

I'm looking to make my PayPal donate button smaller after noticing that PayPal is making it larger. How can I adjust the size of my customized PayPal

I am seeking your help in resolving an issue with PayPal enlarging my button from 130px x 65px to 300px x 150px. I have checked the button on both a local browser and within the Square Space editor, but the result remains the same. I even attempted to adju ...

htmlpaypal

What is the best way to access a specific attribute of an HTML element?

Within my ng-repeat loop, I have set a custom attribute like this: <div ng-repeat="item in itemsList" stepType="{{item.stepType}}"> {{item.itemValue}} </div> The possible values for item.stepType are 'task' or 'action ...

javascriptjqueryhtmlangularjsangularjs-ng-repeat

Execute JavaScript function when the page is being refreshed or accessed from an external link

On the Home page, we have a special Lottie animation that serves as a preloader. This animation should only display under certain conditions: Accessing the home page by clicking on a link from an external page (not on your website) Refreshing the brow ...

javascripthtmljquerycsslottie

Creating a uniform height for images in a Bootstrap 4 carousel across various sizes and screen dimensions

Here is an example of a carousel provided by w3schools: <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active" ...

htmlcsstwitter-bootstrapbootstrap-4

Images are not appearing correctly on Chrome browsers when using Windows operating system

img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly. Queries What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties. Is there a straightforward s ...

htmlcssgoogle-chromefirefoxwindows-11

Sliding in and out: toggling multiple divs sequentially using jQuery and a shared class

Having a bit of trouble implementing the slideToggle() function on multiple div hovers, where each hover shows another div within its corresponding container. Here is an example setup: <div class="container">123 <div class="content">ABC< ...

javascriptjqueryhtmlslidetoggle

Displaying a list of terms and their corresponding definitions side by side

I need to display multiple rows of data, with a title and corresponding data on the same line. While I have found answers on sites like SO (e.g. How to style dt and dd so they are on the same line?), the suggested solutions don't seem to work for my s ...

css

Tips for highlighting text in a textarea using jQuery or JavaScript

I'm intrigued by Facebook's functionality. They utilize textareas in their comments and status sections, but whenever I tag someone in a post, the selected text is highlighted with a light blue background within the textarea. As far as I know, th ...

javascriptjquerycss

Learn the process of generating sequential heading numbers for topic headings in each HTML document using DTA or XHTML

I attempted to include hierarchical numbers for topic headings in dita2xhtml_eclipsehelp.xsl. (DITA OT HTML output) However, I am facing difficulty in producing numbers similar to the following in each html file: 1 heading text 1.1 heading text 1.1.1 Head ...

htmlxsltoutputtableofcontentsdita

Styling a PrimeFaces panelGrid within a data table using CSS

I am struggling to add a background color to a panelgrid within a datatable when a hover event occurs. Despite writing the necessary code and CSS, nothing seems to work. Any suggestions on how to address this issue? <p:dataTable id="movementsTable" var ...

htmlcssjsfprimefaces

I don't use Angular to execute a function when (load) is triggered

Whenever I try to open the div, the function doesn't seem to work correctly. Sample HTML: <div class="row table-dark table-bordered"> <div class="col-xl-12" (click)="isCollapsed=!isCollapsed;"> Click Me! <ng-container *ngIf= ...

javascripthtmlangulartypescript