标签: pseudo-element

有没有办法使用jQuery 选择/操作CSS伪元素,如::before和::after(以及带有一个分号的旧版本)？

例如,我的样式表具有以下规则:

.span::after{ content:'foo' }

如何使用jQuery将'foo'更改为'bar'？

我试图:after在input字段上使用CSS伪元素,但它不起作用.如果我使用它span,它可以正常工作.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

这是有效的(在"buu!"之后和"更多"之前放置笑脸)

<span class="mystyle">buuu!</span>a some more

这不起作用 - 它只用红色调色someValue,但没有笑脸.

<input class="mystyle" type="text" value="someValue">

我究竟做错了什么？我应该使用另一个伪选择器吗？

注意:我不能添加span我的input,因为它是由第三方控件生成的.

我有一个元素列表,其样式如下:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

输出One | Two | Three | Four | Five |而不是One | Two | Three | Four | Five

任何人都知道如何选择CSS除了最后一个元素？

您可以在此处查看:not()选择器的定义

怎么写:hover和:visited条件a:before？

我正在尝试,a:before:hover但它不起作用

我试图用:after伪元素CSS选择器设置元素的样式

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

看起来::after元素不能低于元素本身.

有没有办法让伪元素低于元素本身？

假设我想使用图像装饰指向某些文件类型的链接.我可以将我的链接声明为

<a href='foo.pdf' class='pdflink'>A File!</a>

然后有CSS喜欢

.pdflink:after { content: url('/images/pdf.png') }

现在,这很好用,除非pdf.png我的链接文本的大小不合适.

我希望能够告诉浏览器缩放:after图像,但我不能为我的生活找到正确的语法.或者这就像背景图像,只是不能调整大小？

ETA:我倾向于a)将源图像的大小调整为"正确"大小,服务器端和/或b)更改标记以简单地提供内联的IMG标记.我试图避免这些事情,但他们听起来比试图纯粹用CSS做的东西更兼容.答案我原来的问题似乎是"你可以排序的做到这一点,有时".

只是想知道是否有可能以某种方式使CSS content属性插入html代码而不是字符串:before或:after类似的元素:

.header:before{
  content: '<a href="#top">Back</a>';
}

这将是非常方便的...它可以通过Javascript完成,但使用CSS这将真正让生活更轻松:)

我想在网页上使用开关来设置段落标签的布局.

我使用了后伪元素

p:after {content: url("../img/paragraph.gif");}

现在我需要从页面中删除此css代码.如何轻松完成(页面上已经使用了jquery)？(我不想包含或删除包含css的文件)

如何使用遵循Sass语法或者SCSS语法的:before和:after伪元素选择器？像这样:

p
  margin: 2em auto
  > a
    color: red
  :before
    content: ""
  :after
    content: "* * *"

当然,以上都失败了.

我想在CSS(或任何其他伪选择器)中结合:after使用:hover.我基本上有一个列表,selected该类的项目使用了箭头形状:after.我希望对于正在盘旋但不能让它工作的对象也是如此.继承人的代码

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>