Tag: 伪元素

你可以添加换行符：在伪元素之后？: 我想追加一个<br />到一个特定的类。使用：after伪类简单地将<br />显示为文本。有没有办法做到这一点？这是IE8的内部，所以浏览器问题不是一个问题。如果我做 <span class="linebreakclass">cats are</span> brilliant 我希望“辉煌”出现在一个新的线上。

使用：在CSS伪元素之前添加图像到模态: 我有一个绝对定位的CSS类Modal ，在它的父级上面z-索引，并很好地与JQuery定位。我想添加一个脱口秀图片（^）到模式框的顶部，并且正在使用:before CSS伪select器:before干净地做这个。该图像需要绝对定位和模式上方的z-indexed，但我还没有find任何方法来添加适当的类到content属性中的图像： .Modal:before{ content:url('blackCarrot.png') /* with class ModalCarrot ??*/ } .ModalCarrot{ position:absolute; left:50%; margin-left:-8px; top:-16px; } 第二个最佳select – 我可以在内容属性中内联添加样式吗？

对于伪元素，我应该使用单冒号还是双冒号？: 由于IE7和IE8不支持伪元素的双冒号表示法（例如::after或::first-letter ），并且由于现代浏览器支持单冒号表示法（例如:after ）以提供向后兼容性，应该我只使用单冒号符号，当IE8的市场份额下降到可以忽略的水平时，回到我的代码库find/replace？或者我应该包括两个： .foo:after, .foo::after { /*styles*/ } 如果我关心IE8用户（可怜的亲爱的），单独使用double看起来很愚蠢。

：之后和：在萨斯的伪元素select器之前: 如何使用：before和之后的伪元素select器遵循Sass的语法，或者SCSS？喜欢这个： p margin: 2em auto > a color: red :before content: "" :after content: "* * *" 当然，以上失败。

结合：之后：hover: 我想要结合:after :hover在CSS（或任何其他伪select器）。我基本上有一个列表， 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; […]

CSS：如何删除伪元素（之后，之前，…）: 我想用一个开关在网页上的段落标签的布局。我使用后伪元素 p:after {content: url("../img/paragraph.gif");} 现在我需要从页面中删除这个CSS代码。这怎么能轻松完成（jquery已经在页面上使用了）？（我不想包含或删除包含CSS的文件）

我可以在CSS中更改图像的高度：在/之后的伪元素？: 假设我想用一个图像装饰链接到某些文件types。我可以声明我的链接为 <a href='foo.pdf' class='pdflink'>A File!</a> 然后有CSS像 .pdflink:after { content: url('http://img.dovov.compdf.png') } 现在，这个工程很好，除非pdf.png不适合我的链接文本。我希望能够告诉浏览器缩放:after image :after ，但我不能为我的生活find正确的语法。或者，这就像背景图像，resize是不可能的？ ETA：我倾向于a）将源图像调整为“正确”大小，服务器端和/或b）将标记更改为简单地提供IMG标签内联。我试图避免这两件事情，但他们听起来像他们会比纯粹用CSS做东西更加兼容。我原来的问题的答案似乎是“你可以这样做，有时候”。

CSS：不是（：最后一个孩子）：在select器之后: 我有一个元素列表： <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 和这样的风格： ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; } 输出One | Two | Three | Four | Five | One | Two | Three | Four | Five | 而不是One | Two | Three | Four | Five […]

我怎样才能使生成的内容可选？: 我可以让CSS通过使用生成的内容显示元素的ID，如下所示： <style> h2:hover:after { color: grey; content: "#" attr(id); float: right; font-size: smaller; font-weight: normal; } </style> <h2 id="my-id">My ID</h2> <p>Pellentesque habitant morbi tristique senectus et netus et.</p> 如何使生成的内容（“＃my-id”）可选，以便用户可以突出显示并复制它？