标签: pseudo-element

我可以通过+符号(新样式规则)添加常规样式规则,但我不能在样式检查器的"Pseudo :: before Element"或"Pseudo :: after Element"部分下添加一个.如果我尝试通过"编辑为HTML" 将::beforeor或::after元素添加到HTML中,它将以文本形式显示.我的解决方法是添加<span class="pseudo_before"></span>然后设置样式.我错过了什么吗？

div::after {}和之间有什么不同div:after {}？我们什么时候需要使用::过:？

双冒号和单冒号表示法用于区分伪类和伪元素.

上述陈述的实际含义是什么？

我正在努力实现类似于这张图片的东西:

我有一个包含在div中的图像(作为幻灯片的一部分),并且使用:before和:after伪元素,我显示两个控件移动到幻灯片的下一个(>>)或前一个(<<)图像.

到目前为止,我有这个:

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

但是,我不能将伪元素的内容集中在一起,文本看起来像这样:

这有可能实现吗？如果没有,那么最具语义性的解决方法是什么？我不想把元素本身,只是它的内容集中.我希望将元素拉伸到100%高度.

编辑: http ://jsfiddle.net/rdy4u/

编辑2:此外,img是液体/液体,div/img的高度未知,宽度设置为800px和max-width80%.

我重新问这个问题,因为它的答案在我的案例中不起作用.

在我的打印媒体样式表中,我想在使用:after伪类的每个链接后附加url .

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
}

在Firefox(可能是Chrome但不是IE8)中,text-decoration: none被忽略,并且下划线在URL的底部没有吸引力.该color然而,正确设置为黑色的网址.有没有办法让text-decoration工作？

的原来的问题所附固定大小的图像,而不是可变宽度的文本.它的答案使用填充和背景图像,以避免使用文本修饰属性.当内容是可变宽度文本时,我仍在寻找解决方案.

求助 - 用来\00a9代替©

非常不言自明:

body:after {
    content: "© me";
    /* other formatting */
}

在HTML中,©序列插入版权字符.这可以在CSS Pseudo-Elements中完成,就像我想在这里做的那样吗？

我正在使用以下CSS,它似乎正在工作:

a.up:after{content: " ?";}
a.down:after{content: " ?";}    

然而,字符似乎不能像这样编码,因为输出是文字的并显示实际的字符串:

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}   

如果我不能对它进行编码,感觉我应该在jQuery中使用诸如.append()之类的东西,因为它支持编码.有任何想法吗？

我有一个:开头'报价'之前和之后:收盘报价.

现在我想要的是:之后:之后的'引用'参考但我不能让它工作.

有谁知道这是否可能？

我的代码到目前为止: -

blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent:60px;
}
blockquote:before {
  font-size: 170px;
  margin-left: -136px;
  margin-top: 50px;
  opacity: 0.2;
  position: absolute;
  overflow:visible;
  float:left;
  width:135px;
}
blockquote:after {
  float: right;
  font-size: 170px;
  margin-right: 35px;
  margin-top: 33px;
  opacity: 0.2;
  overflow:visible;
  width:135px;
}
blockquote[cite]:after:after {
    display: block;
    text-align: right;
    content: "\2014\ " attr(cite);
    font-style: normal;
    font-size: 0.8em;
    }

select标签是否允许使用:after选择器以便在其后创建伪元素？

我在Mac上尝试过Chrome,Safari和Firefox,但它似乎无法正常工作.

更新
感谢porneL指出生成的内容和替换元素之间的关系.
我发现这篇文章涉及这个主题:http:
//red-team-design.com/css-generated-content-replaced-elements/

有趣的是,一个名为"CSS3 Generated and Replaced Content Module"的W3C文档(从11年前开始!)定义了伪元素:outside,它可以通过将生成的内容放在替换元素之外,提供使用生成内容和替换元素的解决方案.而不是试图将其附加到里面.

原始问题

有没有办法使用CSS :before和:after伪元素设置内联SVG元素的样式？

示例:http://jsfiddle.net/wD56Q/

在此示例中,定义的样式:before未应用于SVG(在Firefox 29和Chrome 35中测试).它是关于content财产:before吗？对于我读到的内容,它会尝试在元素中插入生成的内容..是SVG失败了吗？

MDN的相关文档:

::之前(:之前)

::之前创建一个伪元素,它是匹配元素的第一个子元素.通常使用content属性将化妆品内容添加到元素.默认情况下,此元素是内联的.

内容

内容CSS属性与:: before和:: after伪元素一起使用,以在元素中生成内容.使用content属性插入的对象是匿名替换元素.

示例中的代码:

   svg {
     left: 50px;
     position: absolute;
     top: 50px;
   }
   svg circle {
     fill: green;
   }
   svg:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }
   div {
     background-color: …

第一次真正使用伪:after选择器.不确定我遇到的问题是否是对它的限制,或者我只是遗漏了一些明显的问题.

这是我的实时代码.

li.current:after {
    border-width: 1px 1px 0 0;
    content: ' ';
    background: #256f9e;
    display: block;
    height: 13px;
    position: absolute;
    width: 10px;
    top: 6;
    margin:0px auto;
    z-index: 99;
    transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -o-transform: rotate(-224deg);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    text-align: center;
    float: center;
}

我创建了一个小三角形(或者说是一个旋转成三角形的盒子).我希望它在中心内部,<li></li>但无法使用我的常规方法解决它.失败的事情(没有特别的顺序):

text-align: center;
float: center;
margin: 0 auto;
margin-right: 0;
margin-left: 0;

我错过了什么？我怀疑这很重要,但我正在使用AngularJS.我想如果Angular和Pseudo选择器之间存在已知的冲突(我怀疑),我会提到它.谢谢.