Change the pseudo class "typed::after" to eliminate the element

Hey there, I need some assistance on how to target a specific element with the class .typed::after using JavaScript. The code provided below only targets classes without ::after or ::before, and the cursor is currently positioned on the after of 'typed.'

HTML

<span class="typed"></span>

JavaScript

$(function(){
    $(".typed").typed({
        strings: ["the Philippines"],
        // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
        stringsElement: null,
        // typing speed
        typeSpeed: 40,
        // time before typing starts
        startDelay: 1200,
        // backspacing speed
        backSpeed: 20,
        // time before backspacing
        backDelay: 500,
        // loop
        loop: true,
        // false = infinite
        loopCount: 1,
        // show cursor
        showCursor: false,
        // character for cursor
        cursorChar: "|",
        // attribute to type (null == text)
        attr: null,
        // either html or text
        contentType: 'html',
        // call when done callback function
        callback: function() {
               $(".typed::after").hide();
        },


    });
});

Answer №1

You are unable to do this directly, but there is a workaround. You can assign an additional class to the .typed element which will eliminate the :after by adjusting its content to none

callback: function() {
           $(".typed").addClass('finished');
    },

Furthermore,

.typed.finished:after{content:none;}

Answer №2

It is impossible to directly select pseudo-elements using javascript, as they are solely a css feature.

A workaround is to add or remove a class on .typed, which in turn will hide the pseudo element.

Answer №3

Hey there! Take a look at this sample script I put together for manipulating the pseudo-class:

<style>
    .typed:after {
        content: 'bar';
    }
    .typed.hidden:after {
        display: none;
    }
</style>
<script>
    $('.typed').addClass('hidden');
</script> 

This is because content generated by :after or :before is not considered part of the DOM and therefore cannot be targeted or altered.

For more information on this topic, check out this question jQuery and hiding :after / :before pseudo classes

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

I struggle to build a CSS dropdown menu from scratch

I attempted to create a dropdown menu, but it seems to be malfunctioning. Can anyone identify the error? .dropdown1{ width: 200px; height: 110px; background-color: white; border: 5px solid black; position:absolute; left: 400px; ...

What is the best way to utilize Link navigation in order to navigate away from a blocked route in the latest version of Next.js,

DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...

Unable to display texture and color on .obj files in Three.js

After introducing a new model in .obj and .mtl formats into my three.js code, I encountered an issue where the color of the model would turn white, regardless of its original color or texture. Below is a snippet of the code related to the pig model: // ...

How to close a Bootstrap modal after a successful AJAX request

There seems to be an issue with closing the modal after a successful login when using a sign-in href link that toggles the modal and loads a page within an iframe. I have tried adding the line $('#myModal').modal('hide'); to close the ...

Knex is requesting the installation of sqlite3, but I am actually utilizing a MySQL database

While attempting to execute a query on my local MySQL database using knex, I encountered an issue where it prompted me to install the SQLite3 driver, even though my database is MySQL. To troubleshoot, I installed the SQLite3 driver to see if it would reso ...

Utilizing external clicks with Lit-Elements in your project

Currently, I am working on developing a custom dropdown web component using LitElements. In the process of implementing a feature that closes the dropdown when clicking outside of it, I have encountered some unexpected behavior that is hindering my progres ...

Unused function in Vue error compilation

I am facing an issue with the compiler indicating that the function 'show' is defined but never used. The function show is being used in HTML like this: <b-card> <div id="draw-image-test"> <canvas id="can ...

What sets apart the usage of :host from its absence?

I'm finding it quite confusing to understand the usage of :host in Angular. For instance, let's consider a CSS file named a-component.component.css and its corresponding HTML file named a-component.component.html with a selector of app-a-compone ...

Add the appropriate ordinal suffixes ('-st', '-nd', '-rd', '-th') to each item based on its index

Imagine having an array filled with various option values, such as: var options = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grapefruit", "honeydew", "kiwi", "lemon", "mango", "nectarine", "orange", "pear", "quince", "raspberry", "strawbe ...

I am encountering difficulties in utilizing Selenium with Python to access the dropdown menu

Trying to create a Python script using Selenium to automate the registration process for a sample event I have organized. Click here to view the event page. Successfully accessed the page and clicked on the "Join the guestlist" button: from selenium impor ...

Discovering if the array data is already present in Angular can be accomplished by using specific methods

Here is the snippet of code: data = [ { 'id': 'asdjxv', 'username': 'emma', }, { 'id': 'asqweja', 'username': 'adam', }, { ...

How to set a background image using a lengthy URL in CSS

I am attempting to add a background image through a URL, but the image is not showing up. Here is the code I am using: <div style="background-image:url(https://i.amz.mshcdn.com/pr8NZRyZf0Kmz4FSGMkLtxUwZ70=/575x323/filters:qual ...

"Implement a function in Node.js/JavaScript that creates a new JSON object if the ID matches with the ID of another

const data = [ { system: { id: "4gSSbjCFEorYXqrgDIP2FA", type: "Entry", content: { type: { name: "Author" } }, }, DataDetails: { shortSlugOption: { "en-us": "some value", "za-op": "random value" }, ...

Designing a dynamic left navigation column with collapsible features

I'm currently exploring ways to integrate this style of sidebar navigation with the layout from my JSfiddle. In the first example, the sidebar collapses to the main icons, but the use of the Nav tag is causing it to slide under the content instead of ...

Achieving a Side-Along Sidebar with CSS, Fully Embracing

I'm encountering an issue with achieving 100% height using CSS. Despite my extensive search for tutorials and solutions, I haven't been able to achieve the desired results. My layout consists of a sidebar and a main column where the content will ...

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

The back button stops working following the execution of window.location.replace(href);

A simple function I created allows all containers to behave like links with the click of a button. function allHot(element){ $(element) .click( function(){ var href = $(this).find('a').attr('href'); window.location.replace(h ...

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

How can I open the Ion-datetime view for the current year without allowing the selection of a specific day?

I am currently troubleshooting an issue with an Ionic date-time picker component. Upon opening the datepicker, it defaults to showing May 2021. As I scroll to the present date, I notice a circle highlighting today's date indicating that it selects th ...