在CSS

中使用“:: before”的错误（？）我在我的网站上做了一些很酷的CSS，所以我可以看到什么是代码，什么不是。在CSS

现在我希望每次都有一个代码块 - 文本“代码：”将在代码块上方。

所以我这样做：

.code::before { 
content: "Code: "; 
}

现在的问题是文本“代码：”是代码块中，我该怎么办？谢谢

来源

2014-09-26 Ishay Frenkel

我在这里没有看到任何* bug *。这是CSS生成内容的预期行为。 – 2014-09-26 19:49:23

选择器':: before'和':: after'将内容添加到目标标签。如果您想在标签之前添加它，您必须使用脚本。 – 2014-09-26 19:49:54

没有更多的空间来回答。不过你可能要考虑：http://jsbin.com/jupaz/1/edit – 2014-09-26 19:55:49

您的代码是否正常工作;伪元素不会创建换行符。这里有一个解决方法：

.code { 
    position:relative; 
    margin-top: 1em; 
} 
.code::before { 
    position: absolute; 
    top: -1em; 
    left: 0; 
    content:"Code: "; 
}

演示：http://jsfiddle.net/vro5ojb9/

来源

2014-09-26 19:53:13 Mooseman

非常感谢！我做了一些改变，以适应它，它看起来很完美 – 2014-09-26 19:57:40

高兴地帮助！请参阅http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Mooseman 2014-09-26 19:58:57

是的，它说我需要等待2分钟，然后我将这个标记为答案，谢谢你:) – 2014-09-26 20:00:31

.code::before意味着.code内的伪元素作为任何其他子元素之前的第一个元素。

它并不意味着文档中.code之前的元素。

CSS Selectors:

5.12.3的：前和：后伪元素

在 '：前' 和 '：后' 伪元素可以用来插入生成的内容在元素的内容之前或之后。

您的代码正在执行它定义要做的事情，它不是一个错误。

编号：http://www.w3.org/TR/CSS2/generate.html

来源

2014-09-26 19:49:34 Arbel

这里有一个简单的jQuery实例之前，实际上插入<p>标签，无需偏移定位：

$(function() { 
$($('<p>').html('Code: ')).insertBefore('.code'); 
});

的jsfiddle：http://jsfiddle.net/p32ufmza/

来源

2014-09-26 20:04:39

回答

相关问题