使用:before和:after创建的CSS元素不显示
使用:before和:after创建的CSS元素是伪元素，它们可以在选定的元素前面或后面插入内容。这些伪元素在DOM中并不存在，但可以通过CSS样式进行控制。
伪元素的创建方式是通过在CSS选择器中使用:before和:after伪类来定义样式。例如，可以使用:before伪类来在选定元素的前面插入内容，使用:after伪类来在选定元素的后面插入内容。
然而，如果使用:before和:after创建的CSS元素不显示，可能有以下几个原因：
- 缺少content属性：伪元素必须设置content属性，以指定要插入的内容。如果没有设置content属性，伪元素将不会显示。可以通过设置content属性的值为""（空字符串）来创建一个空的伪元素。
- 缺少display属性：伪元素默认的display属性值是inline，如果没有设置display属性或将其设置为其他值，伪元素可能不会显示。可以通过设置display属性的值为block或其他合适的值来控制伪元素的显示方式。
- 缺少position属性：伪元素默认的position属性值是static，如果没有设置position属性或将其设置为其他值，伪元素可能不会显示。可以通过设置position属性的值为relative、absolute或其他合适的值来控制伪元素的定位方式。
- 缺少宽度和高度属性：伪元素默认的宽度和高度属性值是auto，如果没有设置宽度和高度属性，伪元素可能不会显示。可以通过设置宽度和高度属性的值为具体的像素值或其他合适的值来控制伪元素的大小。
综上所述，要确保使用:before和:after创建的CSS元素显示正常，需要设置content属性、display属性、position属性以及宽度和高度属性等相关样式。同时，还需要注意伪元素的层叠顺序和与父元素的关系，以确保正确的显示效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS CDN：https://cloud.tencent.com/product/css-cdn
- 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云存储COS：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台MTP：https://cloud.tencent.com/product/mtp
相关·内容
我有一个div元素，我想根据它的类将内容插入其中。
我能够使用CSS中的div和:after属性将2个元素插入到这个:before中，但我需要能够插入至少5个元素。
以下是我为2：
div {
background: blue;
margin: 0 auto;
width: 50px;
height: 50px;
padding: 0;
display:table-cell;
vertical-align:middle;
text-align: center;
}
div:after {
content:'';
display:bloc
浏览 4提问于2014-01-28得票数 9
考虑到以下JavaScript、CSS和HTML：
console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));
p::after {
content: "Hello" attr(data-after);
}
<p data-after=" World"></p>
火狐和IE11都返回CSS："Hello" attr(data
浏览 0提问于2019-03-17得票数 7
我有一个简单的javascript代码，它设置了div的display = "block“然后display=”(一个空值)，但是当我尝试使用Jquery和本机javascript获得显示样式的值时，它们都会在将其重置为空白值之后作为“块”返回值。如何使用这两种方法中的任何一种获得适当的值(空白值)？
我需要把它设置为空白，而不是‘无’，因为它已经在产品中使用了数千个地方。
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js"></scrip
浏览 0提问于2015-07-29得票数 0
回答已采纳
就像:before和:after CSS伪类一样，我们有:below和:above伪类来模拟各自的效果吗？
浏览 1提问于2017-01-15得票数 2
回答已采纳
我需要在input标记之前和之后使用CSS content显示一些文本。
使用下面的代码，我无法在input标记上获得所需的效果，但是对a标记可以很好地工作。
我做错了什么？怎么修呢？
<input id="test" type="text" name="nametest">
<br>
<a id="moz" href="http://www.mozilla.org/">Mozilla Home Page</a>
#moz::before {
conte
浏览 5提问于2014-12-30得票数 0
回答已采纳
我试图在表单上显示一个FormControl，以保持一个电话国家代码前缀，并且我希望它总是在左侧填充区域显示一个加号。我的赌注是在输入中使用:before元素，但令人惊讶的是，我无法让它出现在DevTools检查器中。当我开始注意到这个问题时，我甚至去解珠子，试图将:before元素放在所有输入上，但没有结果。另一方面，主输入元素的样式按预期工作。
:after也是如此。
所以我的问题是-放置一个:before或:after元素对任何人都有用吗？它是ReactiveForms的一个已知的“特性”还是一个bug？
css
input[name="telCountryCode"]:
浏览 2提问于2017-03-22得票数 0
<progress max="100" value="80" data-value="5"></progress>
CSS
progress { margin: 50px; width:250px; border:0; }
CSS (尝试1)
progress:before, progress:after { content: attr(data-value); }
CSS (尝试2)
progress::-webkit-progress-bar:before,
progress::-webkit-progress-ba
浏览 1提问于2013-08-10得票数 22
回答已采纳
2回答
好奇的问题，网上找不到任何答案。
我在CSS中使用了大量的:before和:after，所以我在样式表的开头声明了这一点：
:before, :after {
content: "";
}
这样，每次需要伪类时，我都不需要声明content。
但是，当我这样做的时候，用display: flex显示的元素会以不同的方式公开。
示例:它们是居中的，而我声明了justify-content: space-between
所以我想知道：flexboxes是否用content: "something"生成自己的伪类？
浏览 6提问于2017-12-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
回答已采纳
2回答
有没有办法在Firebug中看到CSS伪元素，如:after、:before等(称为)？
现在，当我选择一个元素时，我只看到静态CSS应用于它。我没有看到使用:after和:before伪元素对其应用样式。
浏览 0提问于2011-12-07得票数 4
3回答
据我所知，:before和:after在指定目标之前或之后插入内容。我不太确定这个CSS片段的目的是什么？
*, *:before, *:after {
-moz-box-sizing: border-box;
}
浏览 7提问于2014-05-08得票数 6
回答已采纳
我正在查看Twitter引导框架，我确实有一个非常小的问题。
为了将盒子模型设置为border-box，我将看到下面的部分。
*, *::after, *::before { box-sizing: border-box; }
但是如果您查看CSS规范，*会针对所有元素，那么为什么*::after和*::before选择器会被使用呢？
在我看来，这似乎过时了，因为*选择器已经标记了所有元素。
浏览 6提问于2015-07-09得票数 30
回答已采纳
是否有任何方法(可靠地)为新创建的元素重置任何可能的:after和:before CSS规则？
通常，您可以直接在元素上设置要重置的样式规则(如果要确定的话，可以使用!important )，但我不知道只更改元素上:after中定义的规则的任何方法。
(只要有可能，只需使用Chrome。)
示例 at 。
添加:before/:after规则的内容正在影响clientHeight返回的值。
浏览 9提问于2012-03-21得票数 3
回答已采纳
.foo:before {
}
.foo:after {
}
结果：
<div class="foo">
:before
<div class="somecontent"></div>
:after
</div>
是否可以为.foo选择以下:before和:after
:before
<div class="foo">
</div>
:after
<div class="bar">
</div>
浏览 3提问于2015-07-21得票数 1
1回答
我正在使用Twitter-Bootstrap上的导航药丸。在特定的屏幕分辨率下，没有明显的原因，药片会被压下来。在使用Firebug时，如果我从.nav-pills中删除display:table，问题就会消失。我试图覆盖我自己的.css文件中的display:table，但到目前为止，Firefox总是将我的覆盖尝试视为一个单独的样式。
下面是这个问题的一个例子。我知道这不是处理问题的最好方法，但它看起来是演示问题的最好方法。
提前谢谢你，
引导CSS：
.nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:afte
浏览 2提问于2012-04-12得票数 6
我很难理解CSS :after属性的行为。根据规范(和)：
正如它们的名称所示，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。
这似乎并没有限制哪些元素可以具有:after (或:before)属性。然而，它似乎只适用于. <p>工作，<img>不工作，<input>不工作，<table>工作。我可以做更多的测试，但重点是。请注意，在不同的浏览器中，这似乎是非常一致的。什么决定一个对象是否可以接受一个:before :after 和:after属性？
浏览 1提问于2011-08-04得票数 109
回答已采纳
我一直很难理解::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
回答已采纳
1回答
考虑一下这个html：
<div class="logo-b"></div>
这个CSS：
div.logo-b {
content: url(http://placehold.it/350x150);
height: 150px;
border: 1px solid darkred;
}
我试图使用CSS显示一个图像。图像不显示。请看这个，看看我的意思。我错过了什么？
编辑:看起来，Chrome呈现小提琴，因为我提供了上面的罚款，但火狐(我使用)没有。如果我将:before或:after添加到CSS中的类名中，则图像显示在Fir
浏览 3提问于2015-07-26得票数 5
回答已采纳
我使用CSS网格为卡项列表创建水平滚动。当您到达水平滚动的末尾时，我需要在列表左边的第一项和右边列表上的最后一项保留间距。然而，当滚动在列表的中间时，两边不应该有任何间距。
需求
卡片列表开始处的间距(左边)
卡片列表末尾的间距(右边)
显示的卡片数量必须为2.5 (在页面加载时，显示2.5张卡片以表示水平滚动是有效的)
列表中的项数可能有所不同，因此无法使用显式网格。
它应该如何查看列表的开头，并在左侧显示间距的示例：
在右边滚动时它应该是什么样子，在左边不应该是什么样子的例子：
在列表的末尾，右边的空格应该是什么样子的例子：
这是一个。
浏览 1提问于2018-07-04得票数 5
回答已采纳
1回答
我已经使用css创建了一个带圈的div，我也想使用css向右放置一个箭头，但我被它卡住了。
我已经创建了一个小提琴--
<div id="search">
<input type="submit" class="circle-search-button" value="" />
</div>
我在某个地方读到过，可以使用:after : using，但我没有那么多关于css3的知识。
如果你能给我一些提示，那就太好了。
浏览 4提问于2014-10-01得票数 1
回答已采纳
当我将toggleClass方法用于伪元素:after和: and时，它的持续时间值似乎不起作用。顺便说一下，开关工作。
您可以在这个中测试它。
jQuery：
$('p').on('click', function () {
$(this).toggleClass('special', 500);
});
CSS：
p:before {
content:"foo";
color: red;
cursor:pointer;
}
p.special:before {
content:"b
浏览 1提问于2014-11-24得票数 0
回答已采纳
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
回答已采纳
显然，Google中的属性document.styleSheets存在问题。添加新样式表后不会更新该属性。要重现该问题，只需运行以下代码：
// Create the link element
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setA
浏览 4提问于2015-04-05得票数 0
回答已采纳
我所面对的问题如下：
我想以“前#”和“隐藏后”开头。-当我点击“返回”按钮时，应该显示“前#”。-当我点击“前进”按钮时，应该显示“#后置”。
但是当我单击仅显示其中一个元素时，然后刷新页面。刷新后，还会显示其他元素。所以我看到了这两个元素，虽然我只点击了一个按钮。
当我只想切换和保存这两个元素中的一个时，或者当我还想同时切换这两个元素时，我如何修改这段代码才能让它工作。
在过去的几天里，我搜了很多遍，什么也没找到。我会非常感激，而你会拯救我的一天！
链接到jsfiddle上的代码
HTML代码：
<html>
<script src="https://ajax.
浏览 0提问于2018-03-11得票数 1
回答已采纳
仅仅为了学习和实验，有没有办法在没有孩子的独特元素中从零开始生成无限的css样式？就好像使用了像::after和::before这样的伪元素，但是在同一个选择器上使用了好几次。
遗憾的是，我注意到::after和::before伪元素的工作方式类似于自闭元素(input、img等)，而css中的这些选择器也不支持伪元素。因此，很明显，伪元素选择器不能嵌套其他伪元素(我希望我使用正确的术语)来达到目的效果，因为它们不能包含子元素.
因此，我希望在唯一元素中从头开始生成样式规则，而不使用辅助子元素(如<i></i>、<span></span>、<
浏览 4提问于2019-10-13得票数 1
我已经在我的网站上使用了这个，但我不明白它是如何使用CSS生成箭头的。
在CSS中，似乎没有任何东西对我来说是“形状生成”。
上显示的默认CSS为：
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
浏览 0提问于2013-06-27得票数 3
有没有可能让jQuery函数(addClass和removeClass)影响CSS中的:after和:before元素？
.accordion-heading > a:before {
background: url(../images/menuleftarrow.png) 98% center no-repeat;
}
.accordion-heading .accordion-toggle > a:after {
background: url(../images/menudownarrow.png) 98% center no-repeat;
}
浏览 2提问于2015-03-03得票数 0
1回答
我试图在<option>元素中使用伪元素。不过，我在不同浏览器的渲染中观察到了一些不同之处。
所以我的问题是，什么时候允许使用伪元素，如::before、::after和::first-letter以及<option>元素？
上下文
假设我有三个选项元素，
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3"&
浏览 2提问于2018-04-10得票数 2
回答已采纳
1回答
我的问题真的很简单，我只是想做的是:hover，:after和:before，我想悬停和之后嵌入到相同的元素，检查我的css代码：
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
这里的元素在:before中有一个图标，我不能删除或修改，我也想有一个悬停效果在它上…
有没有办法解决这个问题，我的控制台没有显示悬停效果？
浏览 0提问于2013-06-04得票数 1
回答已采纳
目前，我有这个标记，它表示一个图标容器和一些元素，在里面使用CSS样式，最终显示为图形图标。
<div class="icon">
<div class="icon-element1"></div>
<div class="icon-element2"></div>
<div class="icon-element3"></div>
</div>
根据图标的复杂性，子元素的
浏览 0提问于2013-10-23得票数 1
回答已采纳
我正在创建一些，到目前为止我读过的所有帖子都要求你这样做-
i {
position: relative;
}
i:before {
content: "\f099";
position: absolute;
font-size: 1.5em;
}
i:after {
content: "\f096";
position: absolute;
font-size: 2.1em;
浏览 16提问于2017-02-20得票数 0
1回答
CSS content属性允许我修改元素的内容。是否可以修改元素，以便使用纯CSS将其内容作为表单的一部分发布？
我想要做的事情的例子：
<style type="text/css">
#sneaky:before {
content: "Testing, testing!";
}
</style>
...
<form action="foo.php" action="POST">
<textarea name="data" id=&
浏览 1提问于2012-02-21得票数 1
回答已采纳
3回答
如果有的话，我正试图找到解决以下问题的方法。
让我们假设主引号是双面引号“(开始)和”(结束)。我们也可以说，第二个引号是一个单顶引号‘(开始)和’(结束)。
想一想引文中的引语是如何显示的。
当然，引用的标准是交替的，就像这样。
“双单”双单“双”
现在，在HTML中，您可以这样写：
<q>Double <q>single <q>double <q>single </q>double </q>single </q>double.</q>
但是不，如果不应用CSS规则，这是行不通的。我不会在
浏览 1提问于2012-11-18得票数 3
回答已采纳
2回答
我特别想知道的是，就资源而言，*:after会有多贵？在这种情况下，伪元素会成为关键选择器吗？或者客户会拿走所有的元素吗？
换句话说，就性能而言，*:after和*有什么区别？
编辑。愚蠢的例子。我的错。
为了澄清，我尝试用css绘制某物，发现我使用了很多伪元素。如果我能通过写作来节省一些时间的话
*:after,
*:before {
content:'';
}
以及它的资源成本。
谢谢。
浏览 2提问于2013-09-03得票数 3
因此，在我的.container中，我看到<div>的顶部和底部都有1px填充，它来自于我的RoR项目中包含的Bootstrap。即使是创可贴解决方案也是可取的。
Bootstrap中匹配这些:before和:after选择器的css如下所示：
media="all"
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
media="all"
.container:before,
浏览 0提问于2015-01-17得票数 1
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
回答已采纳
我在标题栏中显示标题，这是一个无序的列表。头部的Css设置为，
.header{
background: #f0f0f0;
box-shadow: 0 2px 2px -2px #777;
*zoom: 1;
width: auto;
}
.header:before, .header:after {
display: table;
}
.header:after {
clear: both;
}
但是，背景色(或)阴影框不会使用上述属性显示。它的颜色是白色的，
然后我添加了一个额外的属性
.header:before, .head
浏览 4提问于2015-05-16得票数 1
回答已采纳
我正在创建一个HTML5表单，下面的css可以在除Chrome之外的所有现代浏览器中运行：
input:focus:required:invalid:after, textarea:focus:required:invalid:after { content: "!"; font-size: 20px; margin: -18px 0 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #c40000; }
input:focus:required:va
浏览 0提问于2013-06-06得票数 1
1回答
对于这种情况，有CSS选择器语法吗？
<a href="#">Link text <span>123</span></a>
与
<a href="#"><span>123</span> Link text</a>
我需要找出<span>123</span>是在Link text之前还是之后。
现在，我用额外的span类before|after来解决这个问题，但是我想知道，它是否可以通过选择器来实现。有什么想法吗？
浏览 1提问于2016-05-21得票数 0
回答已采纳
2回答
通用选择器*会影响伪元素如:before和:after吗？
让我举一个例子：
当这样做时：
* { box-sizing: border-box; }
.上面的声明不也自动包含/影响伪元素(如:before和:after )吗？
或者，为了影响像:before和:after这样的伪元素，必须声明这一点吗？
*, *:before, *:after { box-sizing: border-box; }
这有道理吗？
我一直只使用* { box-sizing: border-box; }，从来没有遇到过任何伪元素的问题。但是我看到很多教程在做*, *:before, *:after，但它们从未
浏览 4提问于2014-07-17得票数 26
回答已采纳
可能重复：
在pageload上，我希望类上的前元素和:后缀元素出现。我已经将.lifted:before和.lifted:after设置为css中的不透明度:0。在准备好的文件中，我有：
$(".lifted:before").css("opacity", "1");
$(".lifted:after").css("opacity", "1");
这不管用。据我所知，.after jQuery操作符只用于插入内容。
有什么方法可以使用jQuery来操纵这些伪元素的css吗？
浏览 1提问于2011-04-28得票数 26
1回答
图像上的文本覆盖
、、
我用的是主滑块plugin.slide1 2，3都有不同的类。尝试将文本放在图像上，但不显示。我试过了，但什么也看不见。
.classnameslide1:before {
content: 'Text inserted before via CSS';
}
and
.classnameslide1:after{
content: 'Text inserted before via CSS';
}
浏览 5提问于2018-12-06得票数 0
1回答
我有以下css：
#clickto {
color: white;
text-shadow: 2px 2px 2px Darkblue;
}
#verdescheading:hover {
border-bottom: 1px solid;
}
#verdescheading :before {
content: " >";
}
#verdescheading :after {
content: " <";
}
#verdescheading .
浏览 1提问于2012-08-08得票数 0
回答已采纳
我已经尝试过类似问题的解决方案，但我怎么也想不出如何让文本显示在Safari中糟糕的自定义按钮上！它们在Chrome和Firefox中完美地显示出来。当然，这对iOs用户没有任何帮助。 有什么建议可以让这些文字正确地显示在预期的背景之上吗？ HTML： <a href="#" class="dark-button border">Register</a>
<a href="#" class="light-button border">Register</a> CSS： /* Hex
浏览 7提问于2021-07-13得票数 0
我有以下html..。
<div id="q">
<dl>
<dt><p>lorem ipsum</p></dt>
<dd><span>lorem ipsum</span></dd>
<dd><span>lorem ipsum</span></dd>
<dd><span>lorem ipsum</span></dd>
&
浏览 2提问于2014-03-24得票数 0
回答已采纳
2回答
我正在调整用来创建语音气泡的CSS。CSS源是。
我要把泡泡的背景改成白色，加上一个橙色的边框。我的问题是，我不能让沿气泡底部的三角形周围的边框显示出来。三角形本身应为白色(#fff)，边框为# be 4814。
下面的截图和填充这里：。请问有人对适当的CSS有什么想法吗？
CSS
.bubble {
background-color: #fff;
border-radius: 7px;
border: 2px solid #DD4814;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
4px 4px 0 hs
浏览 2提问于2013-04-08得票数 1
回答已采纳
1回答
我正在开发一个使用离子框架的Android应用程序。在那里我用Cordova Media Plugin播放了一些mp3文件。
在代码中发生了一些我不能理解的奇怪的事情。在代码中，我有一个创建媒体对象并播放它的函数：
function playAudio(src) {
myMedia = new Media(src, onSuccess, onError);
myMedia.play();
document.getElementById('forTest2').innerHTML = "end of playAudio";
}
在我的JavaScrip
浏览 0提问于2016-04-25得票数 1
我对*(Asterisk)进行了研究，发现它选择了所有的元素并将样式应用于它们。
我遵循这个链接，和我注意到这段代码将将border应用于所有元素。
* {
border: 1px solid red;
}
现在，我关心的是*:before和*:after在CSS中做了什么？
*:before,
*:after {
box-sizing: border-box;
}
浏览 2提问于2015-09-27得票数 15
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
