Getting Pseudo-Element Style Values

Getting pseudo-element style values

It depends on the browser. I don't believe IE supports this in any way, but for FireFox and Webkit browsers, you can use the following:

window.getComputedStyle(element, pseudo-selector);

For example:

window.getComputedStyle(document.body, ':before');

See: getComputedStyle

Changing pseudo-element style from javascript

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript.
The workaround is to create a <span> instead of using :before and the same logic has to be applied.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

How do I access style properties of pseudo-elements with jQuery?

You can't use the :before and :after pseudo-elements like this. The purpose of them is to insert content before and after (respectively) the selector you have specified.

Example usage:

HTML:

<span class='a'>
    Outer
    <span class='b'>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

Result:

http://jsfiddle.net/mzcp6/

What happened was that the text |Inserted using :before| was inserted before (well, really, prepended into) the inner span because it was class b and a descendant of an element of class a. Basically, :before and :after don't select; they modify.

Example:

This doesn't work as expected:

HTML:

<span class='a'>
    <p>More text</p>
    <span class='b'>
        <p>More text</p>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    text-size: 100px;
}

Nothing happens:

http://jsfiddle.net/bQ2ty/

EDIT:

:before is not a valid jQuery selector: http://api.jquery.com/category/selectors/

I think you will need to use something other than :before or attempt to extract the original rule using the jQuery plugin: http://flesler.blogspot.com/2007/11/jqueryrule.html

angular change pseudo element style by condition

Does this variable needs to be placed in scss? If it can be moved into .ts file, I'd suggest to add conditional class in your template:

[class.sender--visible]="showAvatar"

Then you need to modify your existing .scss class, adding visibility: hidden and create a new one, which will be:

.sender.sender--visible::before {
    visibility: visible;
}

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

---

Related Topics