Css计数器标记和伪元素之前的输出差异
在回答这个问题之前，我想先解释一下CSS计数器和伪元素的概念。
CSS计数器是一种CSS特性，用于在文档中创建自定义的计数器，以便在页面中显示序号或标记。它可以用于各种场景，例如列表、章节标题、表格等。通过使用计数器，我们可以轻松地为元素添加序号或标记，而无需手动编写HTML或JavaScript代码。
伪元素是CSS中的一种特殊选择器，用于在元素的特定位置插入内容。它们以双冒号(::)开头，并且可以用于在元素的前面或后面插入内容，而无需在HTML中添加额外的标记。常见的伪元素包括::before和::after，它们分别在元素的前面和后面插入内容。
现在来回答问题，"Css计数器标记和伪元素之前的输出差异"。
在CSS计数器中，我们可以使用计数器的值来标记元素。通过设置计数器的增量和起始值，我们可以控制计数器的输出。当我们使用计数器标记元素时，标记会在元素的内容之前显示。
而在伪元素中，我们可以使用::before伪元素来在元素的前面插入内容。这些内容可以是文本、图像或其他HTML元素。当我们使用::before伪元素插入内容时，内容会在元素的实际内容之前显示。
因此，"Css计数器标记和伪元素之前的输出差异"在于它们的输出位置不同。计数器标记会在元素的内容之前显示，而伪元素的内容会在元素的实际内容之前显示。
对于这个问题，我无法提供腾讯云相关产品和产品介绍链接地址，因为这个问题与云计算领域没有直接关联。但是，如果您对云计算或其他相关主题有任何其他问题，我将很乐意为您提供帮助。
相关·内容
最近，我在一个项目中注意到，::after伪元素没有在input元素之后添加任何内容：
input::after { content: "xxxxxxxxxx"; } // no "virtual last child" inserted into DOM "after" the input
(对“虚拟最后一个子”的引用来自MDN页)
当然，像div这样的元素将在“it和最后一个子"::after”之后插入到DOM中：
div:empty::after { content: "xxxxxxxxxx"; }
//In DO
浏览 7提问于2016-10-11得票数 3
回答已采纳
5回答
我正在学习CSS，我在识别属性和理解一些语法方面遇到了一些困难。在下面的CSS中。
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
}
我知道制表符是一个类，在html中的nav li类中包含tab-current类的tabs将与相同的CSS一起应用。
示例：
<div class="tabs">
<nav>
<ul>
<li class=&
浏览 2提问于2014-07-14得票数 4
回答已采纳
我正在查看Twitter引导框架，我确实有一个非常小的问题。
为了将盒子模型设置为border-box，我将看到下面的部分。
*, *::after, *::before { box-sizing: border-box; }
但是如果您查看CSS规范，*会针对所有元素，那么为什么*::after和*::before选择器会被使用呢？
在我看来，这似乎过时了，因为*选择器已经标记了所有元素。
浏览 6提问于2015-07-09得票数 30
回答已采纳
在CSS中:和:：之间到底有什么区别？
例如，我看到CSS代码如下：
.example:before{
content:'just one';
}
和
.example2::before{
content:'here two';
}
有什么关系？什么是最佳实践？
浏览 2提问于2014-01-20得票数 9
回答已采纳
我在我的网站上做了一些很酷的css，这样我就可以看到什么是代码，什么不是。
现在，我希望每次有一个代码块-文本“代码：”将在代码块之上。
所以我做了这个：
.code::before {
content: "Code: ";
}
现在的问题是，文本" code：“在代码块内，我能做什么？谢谢
浏览 1提问于2014-09-26得票数 1
回答已采纳
3回答
我对伪元素的行为感到困惑。我向w3c 学习
因此，我的问题如下：
html：
<div id="breadcrumbs">this is a old content.</div>
css：
#breadcrumbs:before {
content:"this is a new content."
}
我想知道新内容是插入到div标记中还是外部。
<div id="breadcrumbs">this is a new content.this is a old content.</div>
浏览 3提问于2011-10-28得票数 3
我一直很难理解::before和::after在content以外的属性上的用法。参见下面的代码示例，这里有一批代码-
.loader,
.loader:before,
.loader:after
{
border-radius: 50%;
}
这在英语中意味着什么？border-radius，before和after，什么？我认为注释掉CSS中的章节会帮助我通过尝试和错误来理解它，但它只是让我更加困惑。
有人能不能只翻译:before和:after部分在下面的CSS外行术语？
.loader,
.loader:before,
.loader:after
{
border-ra
浏览 1提问于2015-04-14得票数 0
回答已采纳
我对*(Asterisk)进行了研究，发现它选择了所有的元素并将样式应用于它们。
我遵循这个链接，和我注意到这段代码将将border应用于所有元素。
* {
border: 1px solid red;
}
现在，我关心的是*:before和*:after在CSS中做了什么？
*:before,
*:after {
box-sizing: border-box;
}
浏览 2提问于2015-09-27得票数 15
3回答
有什么方法可以用纯CSS来绘制图像背后的黑色“背景”吗？
我相信可以使用:before伪类来完成它。但我不能让它起作用。我也尝试过使用阴影，但最终的结果与我想要达到的结果并不相似。
范围和要求：
现代浏览器，没有javascript，没有jQuery，没有插件，也没有额外的HTML标记。
回答前的：
我知道有无数的方法来实现我正在努力做的事情，但我真的期待一个纯粹的CSS解决方案。如前所述，试图避免对这样简单的事情进行额外的标记和javascript。谢谢!
下面是一个和下面的代码。
img {
position: absolute;
top: 100px;
left
浏览 2提问于2011-12-02得票数 3
回答已采纳
2回答
为了使<a>标记垂直中心，我在这个中找到了这个解决方案
您可以使用一个伪元素显示为内联框，使用的是li的全部高度和垂直对齐到中间。
body, html {
height:100%;/ needed for demo */
}
nav {
height: 50%;/* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;
浏览 1提问于2014-07-14得票数 1
回答已采纳
10回答
我正在使用内联CSS (即style属性中的CSS )制作一个HTML电子邮件签名，我很好奇是否可以使用:before和:after伪元素。
如果是这样的话，我该如何用内联CSS实现这样的东西呢？
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
浏览 4提问于2013-01-03得票数 169
考虑到以下css：
.myDiv:before{
content:'';
width:15px;
height:15px;
display:block;
}
.myDiv:after{
...
...
display:none;
}
和html：
<div class='myDiv'></div>
是否有一种方法可以在.myDiv:after psuedoelement上悬停在“以前”上显示？我知道我可以使用悬停选择器作为.myDiv:hover:before，但我不知道如何从该选择器中
浏览 9提问于2014-01-17得票数 0
回答已采纳
我在使用css "content“属性创建一个有序列表时遇到了一点问题，该列表的样式是使用小数来显示嵌套得更深的项。我想要做的似乎是一个显而易见的任务，但我还没有成功，而且我遇到了一些跨浏览器的问题，但我似乎在互联网上找不到太多的东西……我试图做的事情在我附加在这个问题底部的图像中已经很清楚地写出来了。
我的CSS：
ol {list-style:none; font:11px arial; margin:0px 0px 0px 10px; padding:0;}
ol li:before {
content: counter(num) ". ";
浏览 0提问于2012-01-03得票数 6
回答已采纳
我正在使用CSS2.1计数器将数字应用于棋盘游戏中的男性，该游戏的棋盘图使用HTML和CSS，方法如下：
.ply {counter-increment:main;}
.move:before {content:counter(main);}
使用HTML结构为
<ply>
<move...>
<ply>
<move...>
</ply>
</ply>
所有这些都很好，但是如果计数器值的长度是两位(例如，压缩两位数加上负的)，那么我想有条件地使用的样式。对如何做到这一点或解决办法有什么想法吗？
浏览 6提问于2012-07-08得票数 1
回答已采纳
15回答
我感觉我看到了一种方法，使用CSS内容属性在元素之前插入一个换行符标记。显然这是行不通的：
#restart:before { content: '<br/>'; }
但是如何做到这一点呢？
浏览 0提问于2011-09-09得票数 181
回答已采纳
3回答
据我所知，:before和:after在指定目标之前或之后插入内容。我不太确定这个CSS片段的目的是什么？
*, *:before, *:after {
-moz-box-sizing: border-box;
}
浏览 7提问于2014-05-08得票数 6
回答已采纳
我有以下伪元素：
input[type=radio].selected::before
在internet explorer中，伪元素根本没有显示，所以我决定看一看。我在检查员中找到了选择器(检查器中的选择器将是一本很棒的儿童读物！)但是所有的属性都被删除了。(即被覆盖/无效)。大多数属性不会被其他属性覆盖。这是IE的默认行为，还是意味着样式根本不起作用，更重要的是，它们为什么不显示？下面是完整的css：
input[type=radio]{
visibility:hidden;
cursor: pointer;
width: 22px;
height: 2
浏览 1提问于2013-09-25得票数 4
2回答
CSS2.1伪选择器(如::after和::before )允许向页面添加文本内容。例如：
CSS
p:after { content:' Batman!' }
<p>Na Na Na Na Na Na</p>
浏览器中的输出
Na Na Na Na Na Na Batman!
我的问题是，使用相同的HTML源代码，为什么要使用CSS
p { content:'My hero is' }
p:after { content:' Batman!' }
不输出此
My hero is Batman!
，但却输出这个?
浏览 2提问于2012-07-14得票数 4
回答已采纳
我已经看过 了。这个问题的答案对我没有帮助，因为我无法控制HTML结构。这是用于CSS库的，而不是特定的网页或站点.。
假设我有以下代码：
<style>
* {
background-color: white;
color: black;
}
#too {
background-color: black;
color: white;
}
</style>
<ol>
<li id="won">Item 1</li>
<li id="too">I
浏览 2提问于2013-04-15得票数 1
回答已采纳
在中看到了这段CSS (来自)，无法理解它应该做什么。显然，第一个选择器对所有内容都应用了框大小样式，但我不理解在本例中如何使用::before/::after。我知道这些被用来在给定元素之前或之后添加内容，但是它在这里有什么用途呢？
*,
*::before,
*::after {
box-sizing: border-box;
}
浏览 2提问于2014-12-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
