标签: css-content

有没有办法将节点值继承到content属性？

比如,如果<h2/>标记值设置为"随机标题",我可以content在CSS中的属性内获取此值吗？

我试过了content: inherit;,但它似乎没有用.

我的理论的一个例子:

HTML:

<h2>Random title</h2>

CSS:

h2:after {
    content: inherit; /* should be "Random title" */
}

提前致谢!

在我的网站上,我使用某些链接类型的字体图标.这些图标是通过:beforeCSS语法添加的.

a.some-link:before {
  font-family: icons;
  display: inline-block;
  padding-right: 0.3em;
  content: 'x';
}

但是,当此链接位于行的开头时,它有时会与其图标分开:

我尝试添加white-space: nowrap上面的CSS规则,但没有帮助.

如何将图标和文本保持在一起？(CSS 3没问题)

注意:我不想格式化整个链接white-space: nowrap.

看到这个小提琴:http://jsfiddle.net/xanld/3yh28/

div:before {
    content: 'This div is empty';
}
div:empty {
    background:red;
}

我想只为空div添加css内容.我可以使用:empty选择器,但我需要使用:before选择器来添加内容.可以同时使用两者吗？

谢谢.

让我们演示一个简单的HTML代码示例,如下所示:

<div data-icon="\25B6">Title</div>

我希望这个元素有一个由它的数据属性(data-icon)设置的前缀图标,所以我设置了这样的CSS文件:

div:before {
    content: attr(data-icon);
}

我希望这个例子的输出看起来像这样:

?Title

所有我能得到的不是所需的输出,而是:

\25B6Title

所以我的问题是:我做错了什么/我错过了什么？

JSFiddle示例:http://jsfiddle.net/Lqgr9zv6/

这是我最近的一个问题: 是否可以使用伪元素使包含元素环绕一个绝对定位的元素(如clearfix)？

JSFiddle:http://jsfiddle.net/derekmx271/T7A7M/

我正在尝试使用伪元素来"清除"绝对定位的图像.我已经得到了相同的图像显示在幻灯片后面,但似乎无法将宽度应用于插入的图像.我是疯了,还是你不能将宽度应用于内容为content的伪元素:url(img/image.jpg)？我尝试了不同的显示变化:块等无济于事......

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

我需要将伪元素图像的宽度设置为100%,将最大宽度设置为800px,以便它与我的幻灯片具有相同的尺寸.

我在寻找一种方式来增加对CSS里面的内容属性的HTML标签:after和:before.

不像这个只讨论添加符号的问题<.我想要添加的是:

.breadcrumbs li a:before {
    content: '<i class="icon"></i>';
}

有没有可能的方法呢？

我有以下CSS代码

.editable:before {
    content: url(../images/icons/icon1.png);
    padding-right:5px;
}

这与以下标记结合使用:

<span class="editable"></span>

在世界上所有其他有福的浏览器中,我的图标出现了,但IE8似乎有问题.是不是:before伪元素CSS2？还不content:是CSS2命令？是什么赋予了？

我正在尝试创建步骤定义的要求之一是每个元素都应该编号.是否有用于检查项目是否具有正确的CSS生成内容的API？

我们正在使用Selenium,Cucumber和Capybara来测试我们的应用程序.

我们想要自动测试的CSS:

ul {
    counter-reset: steps;
}

li:before {
    content: counter(steps) ".";
    counter-increment: steps;
}

或者,我们可以将实际内容放在DOM中,但我不喜欢编写代码只是为了满足webdriver,这对于编号问题是一个很好的解决方案,或坚持手动测试这种行为.

编辑: 只是为了澄清,我认为这将需要一个外部API来查询,例如Selenium Webdriver,因为getComputedStyle不返回实际呈现的内容:http://jsfiddle.net/yTUnt/

问题几乎解释了它,但我有列表项目,我想在他们面前放一个简单的菱形图标,但当我尝试使用::之前它最终把图像放在上面而不是相同的线,我似乎真的不能找出如何将它放在同一行上的列表图标之前.

就像我说的图像只是一个小钻石,它的5px乘5px

.list-menu::before {
	content: url('../images/menu-icons/image-before.png');
}

<div class="sb-slidebar sb-left sb-style-push">
	<nav>
		<ul>
			<li class="list-menu"><a href="#">Home</a></li>
		</ul>
	</nav>
</div>

我有一个POC,我必须完成,我只允许使用CSS来更新产品的样式.我已使用CSS内容属性用徽标替换了产品的其中一个图像.

我必须添加一个带有电话号码的简单字符串,以便在此徽标后显示.我试图使用:after伪元素来做到这一点.仅当内容div为空(徽标已删除)时才有效.

.demo {
  content: url('http://placehold.it/350x150')
}

.demo:after {
  content: 'test';
  display: inline-block;
}

<div class="demo"></div>

我曾试图改变display,以inline-block硬编码height和width这两个规则.基本上我能找到的一切.任何帮助将不胜感激.

JSFiddle:https://jsfiddle.net/qykbjznm/