How to manipulate pseudo elements :after and :before?

Question

How to manipulate the CSS in the following tags using jQuery?

h1:after { ... }
h1:before { ... }

Thanks! Or perhaps an alternative, maybe setting this via jQuery on each resize of the browser would be great, to ensure that this displays properly on browser resizing events.

Am using the following CSS, and because pixel values are more accurate for displaying purposes with CSS Triangles, I do not use em values. em values give undesirable results:

h1 {
    font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    font-size: 1em;
    margin: 0 -2.1em;
    background:#BF2C24;
    display: inline-block;
    color: #f2efe9;
    position: relative;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
}
h1:before {
    position: absolute;
    content: "";
    top: 0px;
    left: -20px;
    height: 0px;
    width: 0px;
    border-top: 20px solid #BF2C24;
    border-left: 20px solid transparent; 
    border-bottom: 20px solid #BF2C24;
    margin-left: 0;
}
h1:after {
    position: absolute;
    content: "";
    top: 0px;
    left: auto;
    right: 20px;
    height: 0px;
    width: 0px;
    border-top: 20px solid #BF2C24;
    border-right: 20px solid transparent; 
    border-bottom: 20px solid #BF2C24;
    margin-right: -40px;
}

So, I need to manipulate a few rules on resizing of the browser. Where it says pixels (px) mainly.

***EDIT - So, if this can't be done in jQuery with :after and/or :before, is there another way to do it? Maybe I need to change the CSS? Any suggestions??

Why is this question being voted to be closed?

You can't do it using jQuery. Maybe some workaround like adding classes. — Praveen, Aug 30 '13 at 14:16
@PlantTheIdea - Not a duplicate, sorry, that question is not exactly the same as what I am asking. Read more carefully! — Solomon Closson, Aug 30 '13 at 14:17
@user1671639 - Perhaps another approach to this would be better? Suggestions? — Solomon Closson, Aug 30 '13 at 14:18
Could you not use CSS media queries instead of manually writing the jQuery yourself? — Lewis, Aug 30 '13 at 14:21
You can create the CSS text for the h1::before using Javascript (just `x = 'h1::before {height:'+height+'px;}'` etc), and then append that to the content of the ` — Mr Lister, Aug 30 '13 at 14:21
@SolomonClosson - whether you are changing CSS or internal values, the underlying logic to select those pseudo-elements is the same. because you cannot appropriately select those pseudo-elements, you cannot modify them. read more carefully! — PlantTheIdea, Aug 30 '13 at 14:21
Your link points to a person wanting to change the content of a pseudo element, I am trying to change the pixel values. There is a difference in the question is all I'm saying. Cheers — Solomon Closson, Aug 30 '13 at 14:23
@SolomonClosson Both changing the content and changing pixel values will require the same solution. Create a style tag and add it to your page, or modify an existing stylesheet. — Kevin B, Aug 30 '13 at 14:25
@Solomon Closson: That part about changing the content is just an "example" - it says so in the question. The question as a whole is still generally about manipulating pseudo-element styles using jQuery, which has been thoroughly and amply covered. — BoltClock, Aug 30 '13 at 14:26
@KevinB - The answer in PlantTheldea's link will not work for me. I do not want to change content via a `data-` attribute. I need to change pixel values. — Solomon Closson, Aug 30 '13 at 14:28
@Solomon Closson: There is more than one answer. Have you checked the rest of them to see if any of them will work? — BoltClock, Aug 30 '13 at 14:29

How to manipulate pseudo elements :after and :before?

0 Answers0