0

如何使用 jQuery 操作以下标签中的 CSS?

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

谢谢!或者也许是另一种选择,也许通过 jQuery 在每次调整浏览器大小时设置它会很棒,以确保它在浏览器调整大小事件上正确显示。

我正在使用以下 CSS,并且因为像素值更准确地用于显示 CSS 三角形,所以我不使用 em 值。em 值会产生不良结果:

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;
}

所以,我需要操纵一些调整浏览器大小的规则。它主要说像素(px)的地方。

***编辑 - 那么,如果这不能在 jQuery 中使用:afterand/or完成:before,还有其他方法可以做到吗?也许我需要更改 CSS?有什么建议么??

为什么这个问题被投票关闭?

4

0 回答 0