标签: css-content

我遇到了CSS内容属性,它可以将文本添加到元素中.

例如:

.class:after{
   content: "testing";
}

不幸的是,这个CSS属性只能在IE8中使用!DOCTYPE定义.

无论如何还是我们可以使它在IE7中工作吗？不使用JavaScript或jQuery.

我在webkit浏览器中通过Javascript获取伪元素的生成内容时遇到了一些麻烦.

对于那些关心的人的上下文:我正在研究jQuery移动应用程序并尝试使用FontAwesome图标.我希望能够使用jQM用于其内置图标集的相同data-icon属性添加它们.所以我有一个脚本在页面中搜索任何类,ui-icon-whatever并添加相应的内容属性集.基本上,如果存在具有该名称的FontAwesome图标,则删除jQM图标.icon-whatever为FontAwesome类.麻烦的是FontAwesome使用伪内容作为其图标,而jQM使用良好的老式背景图像精灵.因此,如果图标名称中出现任何重叠(例如,两个集合都有一个名为"编辑"的图标),我最终会在另一个图标上叠加一个图标.正如你可能想象的那样......看起来不太好.所以我试图通过并删除任何背景图像.ui-icon

当我了解到getComputedStyle时,我很兴奋,但是我尝试window.getComputedStyle(this,':before').content != ''了几种变化无济于事.尝试使用':: before'和'before'作为第二个属性,并尝试将其比较为null或false而不是空字符串,但结果是相同的:它要么找到所有图标,要么找不到所有图标.

当我window.getComputedStyle(this,':before').content在Chrome的控制台中转储时,即使在应该有内容的情况下,我总是得到看似空字符串的内容.Firefox做对了.我不确定这是Chrome还是webkit.

我究竟做错了什么？

编辑:下载Safari 5 for Windows.一样的.内容始终为空字符串.我开始认为它可能与我正在使用的jQuery选择器有关this.

我有一个使用的菜单<li>。示例代码如下：

HTML：

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
</ul>

CSS：

li{
    width:190px;
    height:40px;
    padding:3px 10px 3px 50px;  
    border-bottom:1px dotted #003366;
    cursor:pointer;
    line-height:40px;
    background-color: #FFFFFF;
    list-style:none;
    font-weight:bold;                       
    position:relative;
}

li:before{
    content:'';
    position:absolute;
    width:195px;
    height:38px;
    left:50px;
    top:3px;
    background-color: #F9F9F9;
    border:1px solid #CFCFCF;
}

当不使用样式时li:before，<li>将显示其中的文本（即“菜单1”，“菜单2”），但使用此伪类时，li:before它将消失。

以下示例显示了box div包含:after内容的内容,该内容应该是单独的块.

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.box:after {
    content: "?";
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="box">x</div>

但是后面的内容放在滚动条内.我的期望是它实际上是在可滚动区域之后.

有可能让css不做某事吗？

例:

ol {
    counter-reset: item;
}

ol.someClassname {
    NOT counter-reset: item;
}

我知道你应该只是切换类来使它工作.这不是一个真正的问题,我只是想知道它是否可行,谢谢

.class {
    &:after {
        content: "m3/s";
    }
}

我想通过以下方式添加单位声明:标签之后.是否可以制作3上标？

这显然不起作用:

.class {
    &:after {
        content: "m<sup>3</sup>/s";
    }
}

这是一个段落在非样式列表项(<li>)中的样子:

<li>
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

但是,使用自定义列表样式类型时,它看起来像这样:

这个HTML是:

<li class="docs-test">
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

CSS是:

.docs-test {
  color: red;
  list-style-type: none;
}

.docs-test::before {
  content: '\2022 ';
  color: #828282;
  display: inline-block;
  margin-right: 10px;
}

.docs-test p {
  display: inline-block;
}

我知道对于这个特定的自定义列表样式类型,我可以使用list-style-image.但是,我有其他海关清单样式类型,我不能使用列表样式图像.

我怎样才能使自定义CSS内容列表样式类型的列表项内的段落不跳转到下一行"行"的开头？目标是这些自定义列表样式列表以与没有样式的常规列表相同的方式处理段落.

http://jsbin.com/kimilaniga/1/edit?html,css,output

我总是使用:在CSS之前意味着将内容放在选择器之前.我从来没有过任何这方面的问题,但是,我已经横跨东西是困惑我无意中发现,其中一个选择的:前追加里面的元素,而不是来之前它.我不明白为什么会这样.

这是一个小提琴:http://jsfiddle.net/vMtct/1/

这是基本代码:

<div class="block">
  <p>But this &lt;p&gt; will have content <em>before</em>.</p>
</div>

.block {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 50px; }
.block:before {
  background: #eeeeee;
  content: "Here is something that print's inside the selector";
  display: block;
  padding: 20px;
  margin-bottom: 20px; }
p:before {
  display: block;
  content: ">>>"; }