Target Psuedo class "typed::after" to remove element

Question

Hi please help me out how can i target a specific element which is .typed::after using js ? the code below can only target classes without ::after or before and the cursor is on the after of typed

HTML

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

JS

$(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();
        },


    });
});

Gabriele Petrioli · Answer 1 · 2017-11-30T01:00:07.990

1

You cannot, but you can add a class to the .typed element that removes the :after by setting its content to none

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

and

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

edited Nov 30 '17 at 01:00

answered Nov 29 '17 at 23:46

Gabriele Petrioli

191,379
34
261
317

1

need to remove `::after` in selector. – charlietfl Nov 30 '17 at 00:41
@charlietfl good catch. I copy pasted and forgot to edit that part. Thanks. – Gabriele Petrioli Nov 30 '17 at 01:00

score 0 · Answer 2 · answered Nov 29 '17 at 23:46

0

You can't target pseudo-elements with javascript, there are only a css thing.

What you should do is toggle a class on .typed that will itself hide the pseudo element.

answered Nov 29 '17 at 23:46

Axnyff

9,213
4
33
37

im using a typed.js what i want to do it is one its finish typing the cursor will hide – Filipino Brigade Nov 29 '17 at 23:46

score 0 · Answer 3 · answered Nov 29 '17 at 23:52

Hi do check this example script i made to manipulate the pseudo-class

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

this is because content created by :after or :before is not part of the DOM and therefore cannot be selected or modified.

for more info refer to this question jQuery and hiding :after / :before pseudo classes

Target Psuedo class "typed::after" to remove element

3 Answers3