Animating pseudo-elements using Jquery

I'm having trouble animating the :after pseudo-element of my ul. Below is the CSS code I have:

#slider .mypagination ul::after
{
    content: "";
    width:25%;
    bottom: 0;
    left:0;
    position: absolute;
    border-top:1px solid #7accc8;
    transition:0.3s;
}

Here are my jQuery codes:

$(".mypagination li").click(function(){
    $("#slider .mypagination ul:after").css({
        "left":"100px"
    },300);
})

The click event is triggering, as indicated by console.log("click"). However, the animation isn't working properly. Can anyone provide assistance with this issue?

javascriptjquerycss

Answer №1

You won't be able to access the :after element directly through the DOM since it's not a part of it. That means JavaScript cannot interact with it.

However, there is a way around this limitation. Simply assign a class to the desired element and use jQuery to animate it.

$(".myelement").click(function(){
  $("#slider .mypagination ul").addClass("animationClass")
}

Next, you can define the animation using CSS.

#slider .mypagination ul:after {
  left: 0;
  transition: all 300ms ease;
}

#slider .mypagination ul.animationClass:after {
  left: 100px;
}

I haven't tested this code myself, so feel free to experiment with it.

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

What is the best way to blend a portion of an image into a div?

Having a bit of trouble with overlapping my image onto another div in my current project. When you take a look at what I've been working on, you'll see there's an image that says "That's me!" and it needs to overlap the left side div. I ...

htmlcssimageoverlap

Directing to index.html using ExpressJS

JS, I am working on an express app that has various routes defined. However, I am facing an issue where if the router does not match any route, it displays index.html instead of redirecting to a specific route like '/*' as I expected. I am unsu ...

javascriptnode.jsexpresshttp-redirect

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

javascripthtmlcss

Attempting to prevent the use of the <p> tag solely before the text

My toggle function is not working correctly in my FaQ section. When a user clicks on a topic, the bottom section should appear, but the <p> tag is being displayed across the entire line instead of just one word.. Here is an image to help illustrate ...

javascriptjqueryhtmlcss

Having trouble integrating VueX store and router into Mocha tests

Latest Update To view the issue on VueX git repository that has been created, please follow this link: https://github.com/vuejs/vuex/issues/1509 If you want to replicate the problem, here is the link to the repository: https://github.com/djam90/vuex-vue- ...

javascriptvue.jsmocha.jsvuexvue-router

for each and every object, execute the asynchronous function

I have a scenario where I need to loop through objects, call an async method ("search") with a callback, and then write the results (resultSet) to a JSON file once all objects are processed. The issue I'm facing is that the writeFile function is execu ...

javascriptnode.jsasynchronousexpress

Issues with implementing Bootstrap tabs in Vue application

Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...

javascripthtmlcsstwitter-bootstrapvue.js

Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestio ...

htmlcsssvg

The canvas doesn't seem to be rotating even after executing the setTransform

Within my HTML5 canvas, I have been experimenting with drawing lines and rotating them around the center point. My goal is to reset the canvas's transformation each time I draw, followed by re-translating/rotating the canvas. However, I have encounter ...

javascriptcanvas

Is it possible to use an :after background-image to layer on top of the following element?

Seeking assistance on adding an image as a :after element to a navigation bar. The goal is for the image to cover the top portion of the next section according to the design. I have set the :after element as position: absolute with a top: 100%, but it app ...

htmlcsspseudo-element

The dropdown-menu-end class in Bootstrap 5 navbar is not activating on hover as expected

My Bootstrap navbar has right-aligned dropdowns, but when I try changing the trigger to hover, the .dropdown-menu-end class doesn't work as expected. I attempted using CSS for the hover effect: .dropdown:hover .dropdown-menu { display: block; mar ...

cssnavbarbootstrap-5

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

Best practice for organizing sort icons in a table with React and MaterialUI

I am currently implementing the following code in a tsx component. I am still learning about the various layout options available. You can view my code on this sandbox link. import React from "react"; import { ArrowDropUp, ArrowDropDown } from "@materia ...

javascriptreactjsmaterial-ui

Test a JavaScript function within an Angular service using the Jasmine framework

I need to write a unit test for a JavaScript function within an Angular service using Jasmine. Here is the Angular service: angular.module("app.services").service("validationService", ["$q", function ($q) { this.validate = function (filter): ng. ...

javascriptangularjsunit-testingjasmine

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

javascripthtmlcssappendchild

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

javascripthtml

Display the scroll bar in HTML only when the content exceeds the maximum height

I am trying to display a scrollbar only if the content is larger than the specified max-height. However, it seems that the scrollbar is always enabled. <div style="text-align: left; font-size: 1.5rem; max-height: 7rem; overflow-y: auto;"& ...

htmlcss

Error message for something that is conceptualized as an unexpected mistake in a sector unrelated to J

https://i.stack.imgur.com/FBmia.png Whenever I try to run the following code snippet, I encounter an error: var request = 'randomcode'; $.post('../php/forms/postrequest.php', 'type=' + request, function (response) { var ...

jquery

Navigating through an Angular 2 service

I'm struggling to retrieve an array from a JSON API and then loop through it. I can't seem to grasp how it all fits together. Any guidance would be greatly appreciated. This is what my service looks like: import {Injectable} from '@angular ...

javascriptangulartypescript

How can I obtain the width of one element and then use it to adjust the size of another element that is

Currently, I am working on a dropdown menu and facing an issue with setting the submenus to match the width of the top-level page. In my HTML structure (specifically for a WordPress theme), it looks something like this: <ul class="menu"> <li ...

javascriptjquerycsswordpress