标签: pseudo-element

我正在试验<textarea>s 上的一些样式,我尝试用::before和::after选择器做一些东西,我无法做任何事情让它们起作用.所以问题是:这可能吗？我知道CSS周围的形式是神秘的超出提,但似乎这应该工作.

是否可以在数据属性中添加新行？

我想做这样的事情:

CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

HTML

<div data-foo="First line \a Second Line">foo</div>

我发现"\ a"是CSS中的一个新行,但仍然不适用于我.

我正在使用css伪元素:before和:after对网站上的一些图像给出缩进效果.但是,如果不指定宽度和高度,则不会显示这些内容.这将让我为每个图像指定固定的宽度和高度,我想这对静态网页是有用的.

但是,因为这些图像是使用jQuery动态生成的并且是用户提交的,所以每次图像的宽度和高度都不同.现在我可以通过从图像获取宽度并将其传递给:之前的Javascript来解决这个问题,但这似乎对于像这样的事情来说太多了.

我的问题是,如果有一种方法只使用CSS,要将包含图像的宽度传递给:在此<li>之前,以便:before和:after伪元素继承宽度和原始元素的高度.

基本页面布局:

<ul>
   <li>
       <img src="foo" />
   </li>   
</ul>    

# css style simplefied
ul{ float:left; list-style:none}
li{float:left;}
li img{float:left}
li:before{
          content:"":
          position:relative;
          position:absolute;
          float:left;   
          box-shadow:0 1px 2px rgba(0,0,0,0.4);   

}

PS:所需的兼容性仅适用于移动Webkit浏览器.

编辑

我可以通过使用以下行使用Javascript向CSS添加行:

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';    
document.styleSheets[1].insertRule('ul li:before { height: ' +  heightImg+ '; }', 0);

但这意味着我还必须使用动态id.这不会很难,但我只是想知道是否只有CSS方式.

我看过的每个示例和样式表都用于a:visited设置链接样式.除了a:visited具有更高的特异性外,不:visited应该等同和简单吗？

CSS Scoping说

阴影主机的后代不得在格式化树中生成框.相反,活动阴影树的内容 生成框,就好像它们是元素的内容一样.

CSS Pseudo-Elements描述::before和::afteras

这些伪元素生成框,好像它们是它们的原始元素的直接子元素

那么这些是真的呢？

• 首先,影子主机的所有内容(不包括::before和::after)都被活动阴影树的内容替换.然后,::before和::after产生的阴影主机盒.
• 首先,::before和::after产生的阴影主机盒.然后,影子主机(包括::before和::after)的所有内容都被活动阴影树的内容替换.

Firefox和Chrome做前者,但规范是否描述了这种行为？

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";

div::before, div::after {
  content: 'Generated content';
}

<div>Content</div>

我想使用»相邻链接之间的HTML 实体格式化链接的痕迹痕迹,所以它看起来像这样:

主页 » 关于我们 » 历史 »本页

我在CSS中添加了一条规则:

nav#breadcrumb-trail a:after {
    content: " » ";
}

但这是在链接中添加实体,而不是在外面 - 即我得到这个:

主页» 关于我们» 历史»本页

我误解了CSS :after伪元素的行为吗？文档似乎意味着它在指定元素之后添加指定的内容,而不是将其添加到元素容器的内部.有任何想法吗？

我有一个div带有CSS伪元素的元素::before用作关闭按钮(而不是使用实际按钮).我该如何申请一个事件监听器只伪元素？

HTML

<div id="box"></div>

CSS

#box:before
{
 background-image: url(close.png);
 content: '';
 display: block; 
 height: 20px;
 position: absolute;
 top: -10px;
 right: -10px; 
 width: 20px;
}

#box
{
 height: 100px;
 width: 100px;
}

我有一个像这样的SVG图形:

a::before { content: url(filename.svg); }

当我将鼠标悬停在标签上时,我真的希望SVG更改填充颜色,而不加载新的SVG文件,就像我现在一样:

a:hover::before { content: url(filename_white.svg); }

这可能是使用JavaScript,jQuery或只是我不知道的纯CSS实现的吗？

谢谢.

我有一个这样的设置:

<div id="button">Button</div>

这适用于CSS:

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

有没有办法给伪元素一个悬停效果,例如#button:before:hover {...},是否也可以让伪元素悬停以响应另一个被悬停的元素,如下所示:#button:hover #button:before {...}？CSS只会很好,但jQuery也很好.

可能重复:
在伪元素后添加伪元素

我想将两个css ::after伪元素应用于单个DOM元素,每个元素都有不同的颜色.(是的,我可以将DOM元素包装在另一个DOM元素中并给出每个::after元素和伪元素,但我的偏好是更清晰的html.)

我怀疑这是可能的,但想知道是否有人可以告诉我更好.

我特别怀疑将::after伪元素链接在一起的可能性,以便一个::after属于另一个属于DOM元素,但如果有人知道如何实现这一点,请告诉我.