Manipulate the css pseudo-element :after using jQuery's .siblings() method

How can I use jQuery to edit the :after element created by CSS?

<div class="box">
            <h3 class="social">Social</h3>
              <ul>
                <li><a href="https://www.youtube.com/"
                  onmouseout="bgc('rgba(0, 0, 0, 0.4)')"
                  onmouseover="bgc('rgba(230, 33, 23, 0.88)')">Youtube</a></li></ul></div>

.box ul li a:after {
    content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #fff;
    transition: width 1s;
}

.box ul li a:hover:after {
    width: 90%;
}
/* jQuery */
$("document").ready(function bgc(color){
  $('.box ul li a').siblings().css({"border-color": color});
});

I've tried the code above, but it's not working correctly. Is there another method I should be using?

javascriptjqueryhtmlcss

Answer №1

If you want to modify the style of the `after` or `before` elements using JavaScript, you can't directly access them. However, one workaround is to add classes to their parent element.

.colorBlue:after {
  border-color: blue;
}

After adding this CSS code, you can use the following jQuery code:

$('.box ul li a').toggleClass('colorBlue');

This will effectively change the border color of the `after` element.

Answer №2

In jQuery, it is not possible to select pseudo elements because they are not actual DOM elements. - Selecting and manipulating CSS pseudo-elements

Even though browsers render them as if they were real DOM elements, you cannot directly select and manipulate pseudo elements with jQuery (or any other JavaScript APIs, including the Selectors API).

To learn more about this topic, refer to: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

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

The textbox is not able to process the complete input string provided

I am having trouble with entering an email address into a textbox, for example [email protected], as it only accepts dd@g. Here is the HTML code: <input type="email" class="form-control ng-pristine ng-valid-email ng-invalid ng-invalid-required ng ...

c#htmlselenium

Building a stylish bootstrap button within the cell rows of a table using jquery

I need to insert a button in the "Details" column. <button class="btn btn-primary btn-fab btn-icon btn-round"> Here is my code: var tableRef = document.getElementById('ticker_table').getElementsByTagName('tbody')[0]; var ti ...

javascriptjqueryhtmlbuttonbootstrap-4

Deactivate collapsing of active element in Bootstrap 5 accordion without using jQuery

Check out this example of a Bootstrap 5 Accordion element: <div id="accordion-1" class="accordion" role="tablist"> <div class="accordion-item"> <h2 class="accordion-header" role=& ...

javascriptjquerybootstrap-5

What sets Fetch apart from ajax and XMLHttpRequest that makes it impressively faster?

Over the past few days, I have been working on optimizing a client table for a project. The table contains over 10k clients, and as a result, it was taking a long time to load. The front-end team had implemented pagination, filters, and reordering, which ...

javascriptjqueryajaxperformancefetch-api

"How can I exclude empty fields from the form.serialize function in jQuery when using php?" is not functioning as expected

I am facing an issue with using How do I use jQuery's form.serialize but exclude empty fields. Despite following a minimal example that directs to a php script: <html><head> <script src="jquery.min.js"></script> <script typ ...

javascriptphpjquery

Determine the specific table entry that was clicked on

Currently, I am working on developing a dynamic table that includes a button in one of its columns, which triggers a bootstrap modal. I'm a bit unsure on how to determine which button was clicked and how to populate the table accordingly. Admittedly, ...

javascriptcsstwitter-bootstrappug

Using EJS to Render a Function Expression?

Has anyone been able to successfully render a function call in express using EJS? Here's what I've tried so far: res.render("page", { test: test() }); Can someone confirm if this is possible, or provide guidance on how to call a function fr ...

javascriptnode.jsexpressejsserver-side-rendering

Revamping the Bootstrap admin template

Is there a way to customize this Bootstrap 3 admin template? https://getbootstrap.com/docs/3.3/examples/dashboard/ I want to make some changes like removing the top fixed navbar and shifting everything up by 50px (as defined in dashboard.css). However, I ...

htmljquerycsstwitter-bootstraptwitter-bootstrap-3

Extracting values from an event in Vue.js: A step-by-step guide

When working with Vue.js, I use the following code to fire an event: this.$emit("change", this.data); The parent component then receives this data, which is in the form of an object containing values and an observer. It looks like this: { data ...

javascriptvue.js

What could be causing the issue with setting a value for a JSON array in the following method?

Consider this piece of code that I'm currently working with: compareList[productName] = productID + ',' + productHref; console.log(productName + ' ' + productID + ' ' + productHref + ' ' + compareList.length); ...

javascriptjson

The HTML footer designed with bootstrap is not behaving as expected. It is not staying fixed at the bottom of the page and is not displaying at full width despite my coding efforts

Working on a small Sinatra app with bootstrap for layout, I'm encountering some issues. The layout is not sticking to the bottom and not displaying at 100% width as intended. Additionally, the footer text is not centering even after applying the text ...

htmlcsstwitter-bootstrapfooter

JavaScript: Targeting elements by their tag name within a designated container

When working with PHP, it is possible to use the getElementsByTagName method on any DOM object. However, this concept does not seem to exist in JavaScript. For example, if we have a specific node stored in the variable detailsNode, attempting to use detai ...

javascriptdom

Learn how to send data from a MySQL server to a Node.js application using Socket.IO

I've been facing a challenge recently. I am attempting to listen for events from the @rodrigogs/my-sql events node package and then emit those events through socket-io to the react client. However, there seems to be a disconnect that I can't see ...

javascriptmysqlnode.jssocket.iomysql-event

Change button to an ajax spinner when it is clicked using jQuery

$(".post-btn").html("<img src='../images/loader.gif' />"); Why isn't this code working? I know I have the correct selector because when I tried $(".post-btn").text('test'), it worked. I want the text of the button to change ...

javascriptjquerycssajax

find the index of the array-like name attribute in HTML using jQuery

In my code snippet, there is a simple structure like this: <div class="question_wrapper"> <input type="text" class="textinput_questions new_question" name="new_question[1][]"> <input type="checkbox" class="radioinput" na ...

jquery

Utilizing jQuery AJAX with a plethora of dynamically created div elements

Within my JSP file, I have a series of divs that are created dynamically based on a database value. These divs have ids such as event1, event2, and so on. Let's focus on the div with the id event1. Inside this div, there is a button with the id foll1 ...

jqueryajaxjsp

How can I create a parent div with cursor-pointer and apply inline styling to make all child elements

Is there a way to apply the cursor-pointer style to an entire div with inline CSS without it affecting just the white space around the child elements? I have tried using position and z-index without success. I am unable to use an external stylesheet for t ...

javascripthtmlcssinline

Having difficulty implementing a hover event on a sibling element of a target using either the duration parameter in jQuery UI or CSS

My objective is to alter the background color of an element and one of its higher siblings in the DOM but within the same parent upon hover. While I successfully used CSS transition to change the first element, I encountered difficulty getting the sibling ...

javascriptjqueryhtmlcss

What mistakes am I making in this PHP code as I try to work with the select option?

Currently, I am developing a form that involves selecting values. If the user chooses 'yes', I want to display a text box section. However, the code below is not functioning as expected. <select id="gap" name="gap" onclick="gap_textbox();"> ...

javascriptphpjqueryajax

The issue with AngularJS multiple $http requests failing to fetch accurate data

I'm having issues with my AngularJS controller and service modules. I want to refresh custController.allCustomers after adding a new customer so that the UI displays the new data. However, when I call custController.createCustomer, the new customer do ...

javascriptangularjs