标签: css-content

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

就像我说的图像只是一个小钻石,它的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>

我运行一个使用CSS伪元素的网站来插入文本.其中一个插入一个CSS计数器的值(因此,如果没有 CSS文本注入,它需要对系统进行大量的重新设计才能完成此操作).具体的CSS规则是:

.num_defn .theorem_label:after {
    content: " " counter(definition, decimal);
    counter-increment: definition;
}

这将" 定义 " 转换为" 定义1 "(比如说).

但是,注入的文本不能被浏览器搜索.它没有看到1:如果我搜索"定义1"然后它找不到它,如果我搜索"定义.无论定义文本是什么",那么浏览器会高兴地突出显示除插入之外的行1.因此,如果您将粗体文本想象为突出显示,它将如下所示:

定义 1 .无论定义文本是什么

这不太理想!人们喜欢用数字来引用定义并说"在XYZ页面上看看定义1"(并且在没有超链接的情况下 - 很奇怪,我知道,但它确实发生了).

从而:

1. 在服务器端,有什么方法可以将注入的文本指定为"可搜索"？
2. 如果没有,浏览器端是否有一种简单的方法可以启用它？

我试图在不使用JavaScript或JQuery的情况下设计表单.它包括一系列复选框.如果未选中,则在复选框后显示某个gif.否则,之后不显示任何内容.这是我的代码:

input[type=checkbox]::after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:15px;
  z-index:100;
}
input[type=checkbox]:checked::after
{
  content:"";
}

它适用于Chrome,但似乎不适用于Firefox或IE.怎么了？

我试图找到一些有关content:css中各种可能的属性用途的最新信息 ,但只能找到2004年orso的网络古人地牢中的内容,所以我想我必须再次在2011年问这个:

p:before {
content: url(dingdong.png);
}

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

我对:before选择器和content:属性都很新,并且在这个问题上偶然听到了这个问题,一位可爱的女士非常有创意地回答了这个问题:

如何在不使用任何图像或span标签的情况下通过CSS在UL/LI html列表中设置Bullet颜色

只是发现有关内容的实际编码可能会出现一些问题:

li:在{content:"■"之前; 如何在电子邮件文具中将这个特殊字符编码为Bullit？

所以我的具体问题是:除了url()和"text",是疗法其他的可能性？
非常感谢您的建议和想法.

是否可以只显示:after伪使用:hover？例如,使用替代元素.

#parent{}
#child{display:none;}
#parent:hover >#child{display:block;}

至于我用同样的方法:

#parent{}
#parent:after{content:'hi';display:none;}
#parent:hover  #parent:after{display:block;}

有可能吗？还是我自欺欺人？

我正在为附件"时尚"制作一个用户样式表.

它在整个页面上应用半透明暗盒进行夜间浏览.

我正在使用:

html:before {
    content:url()!important;
    position:fixed!important;
    width:100%!important;
    height:100%!important; 
    top:0!important; 
    left:0!important; 
    background:rgba(2,3,3,.35)!important; 
    z-index:99999999999999999!important;
    pointer-events:none!important;
}

创建固定的,重叠的div.

这很好用,但是,如果网站中有任何iframe,它会将此代码应用到iframe的HTML中,您可以在此处看到:

因为这些社交网络小部件依赖于IFRAME,它将代码重复到这些页面中,创建了我所制作的半透明暗盒的双重覆盖.

将所需的外观将是:

我尝试了很多东西,例如将更高的z-index应用于iframe,并将iframe中任何内容的背景颜色和背景指定为'white'和'opaque',以便它'浮动'父html页面的顶部,但这不能很好地工作.我也试过类似的东西:

html:not(iframe):before{}

但这也行不通.我想知道是否有办法以不依赖'html:before'来创建相同效果的方式做我正在尝试做的事情,或者是否有办法做到但没有它在页面上的iframe的html内重复.

我已经用尽了努力让它发挥作用,所以任何帮助都会非常感激.谢谢.

您可能知道,如果您要使用:before和/或:after伪元素而不在其中设置文本,您仍然必须声明content: '';它们以使它们可见.

我刚刚将以下内容添加到我的基本样式表中:

*:before, *:after {
    content: '';
}

......所以我不必再进一步申报了.

除了*选择器是反性能的事实,我知道(让我们说以上是一个例子,我可以找到一个更好的方法来声明这个,比如列出标签),这真的很慢事情发生了？我在目前的项目中没有注意到任何东西,但我想确保在我将它坚持到我的基本样式表之前使用是安全的,我将用于每个项目......

有没有人测试过这个？你有什么话要说的？

(顺便说一句,我 确实知道正确的语法CSS3采用双分号(::before,::after),因为这些都是pseudoelements,而不是伪类).

我有一个<a>元素,之后我想>使用:after伪元素显示一个符号.

该<a>元素的内容是动态的,因此它的宽度变化,有时内容事件跨越了几行(因为该<a>元素是内<div>谁的宽度是固定的).

我希望>水平位置从最长行的末尾开始.也就是说,当我给它right:0;规则时,它应该在元素的最右边(垂直位置现在无关紧要):

这就是它在FF中的表现方式,但在Chrome和IE中,它>出现在最短行的末尾:

我想知道是什么原因导致了浏览器之间的差异,但更重要的是,我想所有的浏览器表现得像FF -放置:after在最长行的末尾.那可能吗？

我把上面的代码放在dabblet上

据我了解，:before并:after在指定目标之前或之后插入内容。我不太确定这个 CSS 片段的目的是什么？

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

我已经设置了一个CSS元素来插入一些内容,通过:

.foo:after {
  content: "Bold, italics";
}

我希望单词"Bold"以粗体字体重量呈现,单词"italics"以斜体字体样式呈现​​.我知道可以添加行:

font-weight: bold;
font-style: italics;

但这会使两个词都变得粗体和斜体.如果我可以在内容字段中使用html元素,我会添加如下内容:

content: "<strong>Bold</strong>, <em>italics</em>"

但唉,这是不可能的.

有没有其他方法来实现这种效果？理想情况下,无需调用javascript,纯粹使用html/css.