标签: css-content

我想以正确的方式动态生成CSS伪类的'content'内的文本.到目前为止,我已经填充了一个有效的jsfiddle.这张照片更好地展示了我想要实现的目标:

这是相关的代码(它也在小提琴中):

[index.php的一部分]:

<div class="checkbutton">
  <input type="checkbox" value="None" id="slideThree" name="check"/>
  <label for="slideThree"></label>
</div>

[style.css的一部分]:

.checkbutton:before
  {
  content: 'Hombre';
  float: left;
  width: 60px;
  text-align: center;

  /* 28 es la altura total */
  font: 12px/28px Arial, sans-serif;
  color: CornflowerBlue;
  z-index: 0;
  font-weight: bold;
  }

我希望能够将该代码重用于两个目的:

1. 使用PHP动态和内部转换它.
2. 不同的按钮与类似的风格.

这意味着,我希望能够创建一个类似的按钮,但名称不同,或者只是翻译它而不需要额外的标记.我不知道如何正确地做到这一点.原因如下:

• CSS位于一个独特的.css文件中,与内容分开.显然,这不会执行php.
• 内联样式中不可能有CSS伪元素
• 没有JavaScript.虽然这可以通过javascript实现,但我更愿意在可能的情况下避免使用它.

我怎样才能实现它？我觉得奇怪的是我需要使用CSS

我正试图用伪元素做一些技巧.

我正在展示一个排名,我希望冠军能够在胜利者的顶部展示,在图像所在的角落倾斜45度.但是图像太大了,有没有办法让我重新调整伪元素上添加的图像？

我只有这个div:

<div class='box'></div>

有了这个CSS:

.box {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid #000;
    position:absolute;
    top: 100px;
    left: 100px;
}

.box::after{
    content: url(URL_OF_IMAGE);
    position: absolute;
    top: -10px;    
    right: -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

我在JSFiddle上做了一个例子:http://jsfiddle.net/GEtds/

我试图改变height和width,但没有效果.

nav ul:after { 
    content:""; 
    clear:both; 
    display:block;
}

该""值对内容属性意味着什么？

我下载了一个带有站点下载器的站点，上面有漂亮的图标。但是下载后，那个图标消失了，我看不到任何图像文件。

在html中，它是这样的。

<li class="active">
   <a href="buttons.html">
      <i class="icon-up"></i> Buttons
   </a>
</li>

该类如下所示。

.icon-up:before {content: "\f0a6"; }

该类定义的含义是什么

:before
content

和

"\f0a6"

如何通过CSS内容显示"$"符号:""我尝试过各种不同的代码.只是

div.example {Content:"$1000";}

在网站上显示"00".

在诉诸Javascript之前尝试这样做.

我正在挖掘我正在使用的网站上的一些旧代码,它使用了iconize.它似乎工作的方式是添加这样的类......

a[href=$='.pdf']{
    padding: 5px 20px 5px 0;
    background: transparent url('icon.gif') no-repeat center right;
} 

这样做有什么好处,而不是我做过的方式？像这样......

a[href=$='.pdf']:after{
    content: url('icon.gif');
    vertical-align: sub;
}

这是演示他们两个的小提琴......

的jsfiddle

我的问题是......如果有的话,使用伪元素与标准填充和背景定位来附加/预先添加图像到元素有什么好处？

我希望编号段落而不是使用有序列表.我试图通过在CSS中使用内容:counter(段落)来实现这一点,这样我创建的每个段落块都会在其左侧生成一个数字.

.pass {
  counter-reset:paragraph;
}

.pass p:before {
  content:counter(paragraph);
  position:absolute;
  font-size:0.6em;
  color:#999;
  margin-left:-3em;
  counter-increment: paragraph;
}

它工作正常,但问题是我无法弄清楚如何对齐数字,使它们都对齐.

所以代替:

7   Content
8   Content
9   Content
10  Content

我希望它们看起来像这样:

 7  Content
 8  Content
 9  Content
10  Content

有没有办法在没有OL和LI的情况下实现这一目标？

相关代码:http://codepen.io/anon/pen/ocptF/

编辑:codepen使用Jade,因此混淆了一些东西.在开始这个问题时我没有意识到这一点.从本质上讲,我认为CSS attr()会在字面上复制HTML属性,但事实并非如此.

我想使用CSS attr函数填写content一些伪元素.然而,它打印出来004时,HTML属性设置为\f004,与08fa时\f08fa.

相关专线:

HTML:

<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div>

CSS:

.zoomfade:before {
  content: attr(data-unfill);
  position: absolute;
}

.zoomfade:before {
  content: attr(data-fill);
  position: absolute;
}

谢谢!

所以我有一个由我的 CMS 生成的导航菜单：

菜单的 HTML 很简单（为了清晰起见进行了编辑）：

 <ul>
     <li><a href="...">Journal</a></li>
     <li><a href="...">Art</a></li>
     <li><a href="...">Work</a></li>
   </ul>

我希望项目显示为手写文本，与网站的总体主题保持一致，为每个菜单项使用单独的 PNG 文件。

为此，我使用了 CSScontent属性，如下所示：

#headerNav .nav li a[href="/_site/en/journal/"]  
 { content: url(/path/to/image.png); }

而且效果很好！每个项目的 HTML 文本被正确的图像替换：

但是，唉，后来我了解到并非每个浏览器都支持content除:before和之外的选择器上的 属性:after！Chrome 和 Safari 会这样做，但 Firefox 不会。但是，当我使用时 :before，不会替换 HTML 节点，但会添加图像：

我该如何解决这个问题？

什么不起作用：

• 制作<a>元素也display: none删除了:before部分。
• 制作<a>元素position: absolute并将其移动到其他地方也行不通。
• 使<a>元素width: 0px搞砸了布局，因为通过添加的图像content不在文档流中。

我不想做的事情：

• 当然，我可以手动输出图像，但我想使用 CMS 给我的 HTML，其中<li> …

我想在div标签之后添加一个三角形.因此我在伪元素之后使用了css3.但它不起作用.以下是我的css规则.

.header-wrapper .part1 ::after {
    width: 0;
    height: 0;
    border-left: solid 48.35px #f21e1e;
    border-bottom: solid 48.35px transparent;
    border-top: solid 48.35px transparent;
}

以下是我的HTML部分

<div class="header-wrapper">
    <div class="part1"></div>
</div>