标签: css-content

你如何使用CSS content属性添加html实体？

使用这样的东西只是打印 到屏幕而不是不间断的空间:

.breadcrumbs a:before {
    content: ' ';
}

我试图: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,因为它是由第三方控件生成的.

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

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

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

我试图用一个:before伪元素与img元素.

考虑这个HTML和CSS ......

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle.

这不会产生预期的效果(在Chrome 13和Firefox 6中测试).但是,它适用于a div或span元素.

为什么不？

有没有办法让伪元素与img元素一起使用？

是否有可能:before为同一元素有多个伪？

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

我试图使用jQuery将上述样式应用于同一元素,但只应用最新的样式,而不是两者都应用.

我试图将链接与图像居中,但似乎无法以任何方式垂直移动内容.

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

图标为22 x 22px

.pdf {
    font-size: 12px;
}
.pdf:before {
    padding:0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
}
.pdf:after {
    content: " ( .pdf )";
    font-size: 10px;
}
.pdf:hover:after {
    color: #000;
}

以下代码均不起作用:

p:before { content: " "; }
p:before { content: " "; }

如何在元素内容之前添加空格？

注意:我需要为border-left和margin-left上色以进行语义使用,并将空格用作无色边距.:)

我想知道为什么浏览器只为第一个元素显示双开引号.第二个元素改为使用单引号.

a::before {
  content: open-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

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

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

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

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

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

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

我想做这样的事情:

CSS:

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

HTML

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

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