为什么my ::before样式显示在::after位置？
在CSS中，::before和::after是伪元素，用于在元素的内容之前或之后插入额外的内容。它们通常与content属性一起使用，用于插入文本或其他可视元素。
当::before样式显示在::after位置时，可能是由于以下原因：
- CSS规则的顺序：CSS规则是按照从上到下的顺序应用的。如果
::before和::after的样式规则定义顺序颠倒，那么它们的显示位置也会颠倒。确保将::before的样式规则定义在::after之前，以确保它们按照预期的顺序显示。 - 定位属性：
::before和::after默认是绝对定位的，它们的位置是相对于它们的父元素的。如果父元素的定位属性设置不当，可能会导致::before和::after的位置混乱。确保父元素具有适当的定位属性，如position: relative;。 - 元素的布局：如果元素的布局发生了改变，可能会导致
::before和::after的位置错乱。例如，如果元素的宽度或高度发生了变化，::before和::after的位置也会相应地发生变化。确保元素的布局稳定，以避免位置错误。 - 其他样式冲突：可能存在其他样式规则或选择器与
::before和::after的样式规则冲突，导致它们的位置显示错误。检查其他样式规则，并确保它们不会干扰::before和::after的显示位置。
总结起来，当::before样式显示在::after位置时，需要检查CSS规则的顺序、定位属性、元素的布局以及其他样式冲突等因素，以确定导致位置错误的原因，并进行相应的调整。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我不知道如何让CSS在:before和:after伪元素中显示欧元符号。
.my-span:after {
content: '€';
}
已尝试使用符号€、u20AC和%u20AC。似乎什么都不起作用。
提前谢谢。
浏览 0提问于2013-12-07得票数 14
回答已采纳
我想用两种颜色显示WordPress小部件的标题。
以下是我尝试过的方法：
function cn_init_widgets($id){
register_sidebar(array(
'name' => 'footer1',
'id' => 'cn-ft-1',
'before_widget' => '<div class="my-cn-ftr">',
'after_widget' =&
浏览 25提问于2018-08-04得票数 0
我想知道为什么下面的pivot_wider()调用不能使my_data以宽格式显示？
pivot_wider()需要names_from和values_from以外的其他信息吗？
library(tidyverse)
before <-c(200.1, 190.9, 192.7, 213, 241.4, 196.9, 172.2, 185.5, 205.2, 193.7)
after <-c(392.9, 393.2, 345.1, 393, 434, 427.9, 422, 383.9, 392.3, 352.2)
my_data <- data.frame
浏览 0提问于2021-02-06得票数 2
回答已采纳
1回答
.arrow-top {
position: relative;
background: #fff;
border: 1px solid #ded6d6;
}
.arrow-top:after, .arrow-top:before {
top: 0%;
left: 5%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-top:after {
border-color: r
浏览 1提问于2015-03-03得票数 0
我有几个div元素，在每个div中，一些段落之间有一个table (p)，使用以下代码： <p style="display: inline-block;">
Something BEFORE the table
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
浏览 18提问于2019-03-14得票数 1
回答已采纳
1回答
我在ASP.NET上做了一些探索，在呈现的输出中偶然发现了一些奇怪的空白行为。很难正确控制缩进和换行符，特别是在使用循环时。我做了一个例子来说明我的问题：
<%@ Page Language="C#" %>
<%
string[] StringList = new string[]{"Stack", "OverFlow", "Rocks", "My", "Socks", "Of"};
%>
*** No whitespace before each w
浏览 2提问于2011-03-19得票数 3
我已经创建了一个自定义总计收集器，为符合条件的客户提供购物车小计3%的折扣。我的收集器代码如下所示：
class My_Module_Model_DiscountCollector
extends Mage_Sales_Model_Quote_Address_Total_Abstract
{
// ...
public function collect(Mage_Sales_Model_Quote_Address $address)
{
if($this->userIsQualified())
{
p
浏览 2提问于2012-05-26得票数 1
回答已采纳
1回答
我正试图做一个汉堡包菜单，却意外地成功了，如下所示。如果我们将position: static ( position的默认值)设置为#hamburger:before和#hamburger:after，我想知道为什么会出错。
另外，在上面的设置中，这两个不应该在#hamburger的前后显示吗？(这样就有三片面包了。)
#hamburger, #hamburger:before, #hamburger:after {
position: absolute; /* here! */
display: block;
width: 35px;
height: 5px;
backgrou
浏览 3提问于2015-06-25得票数 1
回答已采纳
1回答
在我的网站上，我有一些带有工具提示的元素。现在，我处理工具提示的方式是使用纯css和一个属性。下面的代码应该可以帮助您理解：
.my-container [tooltip]:before {
bottom: 25%;
font-weight: 600;
border-radius: 2px;
background: #585858;
color: #fff;
content: attr(tooltip);
font-size: 12px;
visibility: hidden;
浏览 0提问于2016-11-03得票数 1
1回答
我使用的是Genesis样本子主题。我有几个问题。这可能是我错过的一些非常简单的东西。我使用了红色边框，这样我就可以看到主导航的位置了。
主导航似乎没有显示，我已经将主导航重新定位在functions.php文件中的头文件之后，如下所示。标题徽标需要一定的高度才能显示主导航吗？
remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_after_header', 'genesis_do_nav' );
即使我增加了主导航的高
浏览 0提问于2015-08-22得票数 0
2回答
考虑以下脚本(用于local_var2的算术语法与本例无关)：
#!/bin/ksh
function my_func1
{
typeset local_var1=one
typeset local_var2
(( local_var2 = 1 ))
echo my_func1: local_var1 = $local_var1, local_var2 = $local_var2
}
my_func2()
{
typeset local_var1=two
typeset local_var2
(( local_var2 = 2 ))
echo
浏览 0提问于2014-05-09得票数 10
最初，输出的html是：
<tr class="order_item">
<td class="td">
Product Name
<ul class="wc-item-meta">
<li>
<strong class="wc-item-meta-label">Label:</strong>
<p>Value</p>
</li>
<!-- s
浏览 4提问于2022-02-28得票数 0
我试图粘贴一个div并垂直滚动它。但问题是，当我启动Scroll时，div变得很小，插入的图片描述了所有内容。
请参考图像'before_scroll‘和'after_scroll’了解问题。下面是我的HTMl和JS代码：
HTML:
<div id="my-affix" data-spy="affix" data-offset-top="60" data-offset-bottom="200" class="affix fixed-top">
<div class=
浏览 2提问于2014-10-10得票数 0
2回答
这些伪元素已经把我绊倒了一段时间了，我对此有点困惑。
在本例中：
div::before {
content: "hi";
}
它在任何HTML之前注入hi。我明白了，你需要清除浮点数。
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: -1px
}
然而，在此：
.box-content::before {
display: in
浏览 1提问于2017-07-13得票数 2
回答已采纳
出于向后兼容性的原因，是否有一种方法可以定义my方法，以便下面两个调用是相同的？
my(1, A)
my(1, before: A)
其中before是关键字参数。
我现在有
def my(n, klass)
puts "#{n} and #{klass}"
end
现在我需要能够调用my(1, before: A)并获得相同的结果(即"1和A")
my方法也可以使用第二个关键字参数(即my(1, before: A, after: B) )来调用。
def my(n, before, after: nil)
puts "#{n} and #{bef
浏览 5提问于2019-10-24得票数 2
回答已采纳
考虑到以下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回答
通用选择器*会影响伪元素如: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
回答已采纳
如果我clear()我的本地列表(mList)，它也会清除companion的突变者(list)为什么会发生这种解释是欢迎的:)
我有一个像这样的companion类：
class Data {
companion object {
var list:MutableList<String> = ArrayList()
}
}
如果我创建本地列表，如下所示：
fun main() {
// some dummy data
Data.list.add("Lion")
Data.list.add("Cat"
浏览 2提问于2022-10-24得票数 0
回答已采纳
1回答
有问题的造型，我的手机响应@媒体。我可以在网站上显示我的容器和导航，但不能在我的@媒体上显示。
//========================================================
/* HEADER CONTAINER */
//========================================================
.container
background-color: #FFF
display: flex
flex-direction: row-reverse
.container:after
conten
浏览 0提问于2017-04-24得票数 0
回答已采纳
在自定义wordpress菜单时，我遇到了严重的问题。
$setup = array( 'menu' => '', 'container' => 'div', 'container_class' => 'menu', 'container_id' => 'menu', 'menu_class' => 'menu', 'menu_id' => 'menu',
&#
浏览 0提问于2012-06-29得票数 0
回答已采纳
5回答
我在这里有一个相当简单的分页算法，但它的工作方式并不是我想要的那样。
目前它是这样显示的
1 2 3 ... 33 34 35 [36] 37 38 ... 47 48 49 50
当它应该像这样显示时
1 2 3 ... 33 34 35 [36] 37 38 39 ... 48 49 50
这是我的代码，我写得非常快。它似乎也在持续运行(循环不会停止)，但我不知道为什么。
$(function(){
var pages = 50; //Total number of pages
var current = 36
浏览 0提问于2010-02-19得票数 2
回答已采纳
我对Foreach循环中的显示组件有问题：
I.第一个案例组件工作：
我创建了这样的简单组件(名为HelloComponent)：
<h3>Hello Adam!</h3>
当我运行它时使用：
///My code before component
await Component.InvokeAsync("HelloComponent");
///My code after component
每个人都在想工作，我得到了：
///My code before component
Hello Adam!
///My code after compo
浏览 1提问于2021-05-04得票数 0
回答已采纳
1回答
为什么当我用defaultFn指定我的事件的默认函数时不执行它
var node = Y.one(".foo");
node.publish("myEvent", {
defaultFn: function () {
//I don't understand why this doesn't execute
//I expect it to execute after my on listener
//and before my after listener
Y.log(&
浏览 1提问于2013-08-08得票数 0
回答已采纳
以下是代码
use strict;
use warnings;
my $cmd = "ls";
my $pid = open(INPUT,"$cmd 2>&1 |");
print "PID = [$pid] [$?]\n";
if (!defined($pid)) {
print "PID not defined\n";
} else {
print "BEFORE CLOSING exit code is [$?]\n";
}
close IN
浏览 1提问于2013-04-06得票数 1
1回答
我试图在wordpress中实现一个没有插件、类别和标签页的面包屑方案。
我把我使用的面包屑转换成一个模式，它可以工作，但唯一的问题是我不能在模式中设置位置值。
举个例子，事情在一个子类别中出了问题.
这是我使用的代码；
function schema_breadcrumbs() {
$text['home'] = 'Home';
$text['category'] = '"name": "%1$s"';
$text['url'] = '"@id
浏览 2提问于2022-02-02得票数 1
回答已采纳
我从上一个问题中得到了，我看到了这些行：
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
如果我去掉了content:""，效果就毁了，我不明白为什么它是必要的。
为什么需要向:after和:before伪元素添加一个空的content？
浏览 0提问于2012-03-07得票数 30
回答已采纳
我想在一个单独的行中做ul和div，ul也应该显示在右角。当我在ul和li上使用li属性时，它在右边，但是div也出现在上面，为什么它的出现也使用:after和:before of ul，也使用clear属性，但是没有得到正确的输出。
HTML:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div>
Hello Its a Full Article
</div>
CSS:
浏览 6提问于2015-05-20得票数 1
回答已采纳
1回答
字体下拉箭头不显示
、、、
我有一个下拉式字段与下拉箭头，这是由WebSymbolsRegular字体处理。我将字体文件上传到服务器上，设置font-face，并将我想要的字体符号放在下拉列表的css中:after。由于一些奇怪的原因，它不能工作，我将不胜感激，因为我从来没有真正做过这样的事情。
代码如下：
.selectadmin {
box-sizing: border-box;
color: #666;
background: #fff;
height: 30px;
box-shadow: inset 0 -5px 7px rgba(0, 0, 0, 0.08);
border: 1px
浏览 0提问于2017-03-04得票数 0
假设您有一个解析@remove等at规则的PostCSS插件，然后将其删除。下面是一个示例程序： const fs = require('fs');
const postcss = require('postcss');
const plugin = func => {
func.postcss = true;
return func;
};
fs.readFile('test.css', (err, css) => {
postcss([
plugin(() => ({
postcssPlu
浏览 17提问于2021-01-04得票数 1
1回答
我读了一篇关于清除浮点的文章。
然后在引导程序中检查.clearfix：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
我发现一些不同之处，我有几个问题：
为什么clearfix分离成几个部分？
为什么display是table而不是block
为什么这样使用line-height而不是height
浏览 4提问于2013-06-09得票数 3
我可以通过+号(New style Rule)添加常规样式规则，但不能在样式检查器的“rule ::after Element”或“Rule：：after Element”部分下添加。如果我尝试通过"Edit as HTML“将::before或::after元素添加到超文本标记语言中，它将显示为文本。我的解决方法是添加<span class="pseudo_before"></span>，然后对其进行样式设置。我是不是遗漏了什么？
浏览 1提问于2014-02-26得票数 82
回答已采纳
我的wordpress站点有三个动态侧边栏。侧边栏1和2可以很好地工作，但是第三个侧边栏(类别)将接受小部件并在站点上显示它们，但是当我在wp admin中编辑它们时，它会删除它们。对这个问题有什么想法吗？
<?php
// Sidebars
add_action( 'widgets_init', 'my_register_sidebars' );
if (function_exists('register_sidebars')){
function my_register_sidebars() {
浏览 0提问于2011-08-18得票数 0
回答已采纳
4回答
我想知道如何等待来自调用后端的HttpClient操作的响应，我需要等待直到后端返回响应(同步调用)，典型的方法是订阅可观察的响应：
//My component
...
console.log("before");
this.myService.getSomeThingFromBackend('param_value').subscribe(response => {
console.log("do my stuff");
}
console.log("after");
//My Service
...
get
浏览 2提问于2020-03-05得票数 1
回答已采纳
4回答
我需要使用这个形状，在内部显示一个文本。但是，我不知道为什么文本是没有显示。
HTML：
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS：
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
浏览 5提问于2016-01-26得票数 2
回答已采纳
我正在使用DateTime对象，以便遍历几个星期的日期。我有一个开始日期和结束日期，我试图将开始日期分配给另一个变量名，这样我就可以在不接触原始开始日期对象的情况下处理它。但是，当我将1添加到开始日期时，变量也会添加1，即使在添加日期之前已经分配了它。下面是一个代码示例：
use strict;
use warnings;
use DateTime::Format::Strptime;
my $dt = DateTime->now(time_zone=> 'America/New_York');
my $dateback0 = $dt->strftime(&
浏览 6提问于2020-04-28得票数 0
回答已采纳
4回答
这是我要问的代码
.store {
display: block;
position: relative;
}
.store:before, .store:after {
display: block;
position:absolute;
content:'';
}
.store:before {
background: url(store-before.png);
height: 23px;
width: 54px;
top:-3px;
left:-3px;
}
.store:after {
background: url(st
浏览 1提问于2013-09-04得票数 2
回答已采纳
1回答
复选框Mozilla跨浏览器问题
、、、、
我在Mozilla的复选框中遇到了一些问题。这个复选框(在上)在Chrome上运行得很好，但是在Mozilla上它看起来像默认的复选框。我尝试并添加了-moz-appeareance: none，但它似乎没有读取伪(::before和::after)元素。我真的不明白，为什么它没有按预期的那样显示。
浏览 1提问于2016-03-14得票数 0
回答已采纳
我在2021年还需要这个吗？
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
我能得到它们的用途的解释吗？
浏览 15提问于2021-03-15得票数 0
我有以下代码，我不太明白为什么结果恰好是如下所示：
#include <iostream>
#include <sstream>
using namespace std;
int main () {
std::stringstream s;
std::streambuf *backup;
backup = cout.rdbuf();
s << "Oh my god" << endl;
cout << "Before1" << endl;
浏览 2提问于2012-07-11得票数 1
回答已采纳
2回答
我有一个粘性导航条，几乎是完整的外观和感觉。但是，每当我在任何链接中添加下拉菜单时，它都会创建一个不可见的字段，该字段将隐藏在其中的文本。经过一些挖掘，我发现UL具有下降的全部高度属性，即使它目前是不可见的。如果可能的话，我的目标是使下拉菜单成为它自己的实体，这样就不会发生这种情况。最后的结果将使菜单有一个更高的z索引，并且只掩盖它下面的内容，直到你把鼠标移开。
当我在做这个的时候，我也遇到了一个小问题，在元素出现的空间上，下拉菜单出现了。这是一个不理想的结果，我相信这是问题的根源。
下面是出现在下拉菜单上的情况：
下面是没有它的情况：
这是一个。如果你有问题的标志出现，只
浏览 2提问于2017-02-13得票数 0
回答已采纳
1回答
有关部分：
#inline-navigation ul {
display: table;
text-transform: uppercase;
text-align: center;
list-style-type: none;
margin: 0 auto;
padding: 24px 0px;
}
#inline-navigation ul li {
display: table-cell;
}
#inline-navigation ul li a {
text-decoration: none;
color:
浏览 2提问于2014-05-19得票数 2
回答已采纳
因此，下面的代码可以影响“my-容器”的背景图像的不透明度，而不影响"h1“的不透明度，这是所需的结果。
HTML：
<div class="my-container">
<h1>Scotch Scotch Scotch</h1>
</div>
CSS：
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after - it doesn't re
浏览 6提问于2017-02-11得票数 0
回答已采纳
我正在为Woothemes的画布开发一个子主题。
我试图在子主题中使用functions.php，以便仅在我的自定义帖子类型上使用操作。
这段代码似乎不起作用：
add_action( 'woo_post_inside_after', 'my_geo_mashup' );
function my_geo_mashup() {
echo GeoMashup::map();
if ($post->post_type == 'listings') {
//My function
}
}
ad
浏览 0提问于2011-04-27得票数 0
回答已采纳
1回答
我有一个字符串，包含几种类型的个人可识别信息(PII)：
text = 'Hello my name is Tom and I love Tomcat. My email address is tom@foo.bar and my phone number is (201) 5550123.'
我还有一个要从字符串中删除的PII列表：
values = ['Tom', 'tom@foo.bar', '(201) 5550123']
我希望将这些值组合成一个正则表达式，并一次替换它们，而不是循环遍历这些值并一次替换它们：
escap
浏览 0提问于2021-03-30得票数 3
回答已采纳
我使用的ItemsControl是由一个包含几种不同数据类型的集合填充的。每种数据类型都有自己的DataTemplate，并且都正确显示，但我的问题是:当同一类型的多个数据类型相继显示时，第一个数据类型必须在其上方显示一个标题，最后一个数据类型必须在其下方显示一条水平线。有没有办法在XAML中检测到这一点，或者我需要对这个列表进行一些预处理才能设置标志？
数据如下：
Patient
Test
Result <-- header before this
Result
Result <-- line after this
Test
Result <-- header before
浏览 3提问于2013-01-15得票数 0
回答已采纳
2回答
Firefox似乎是唯一没有正确显示我的CSS头的浏览器。它应该有一个深蓝色的边框，上面和下面，它正确地显示在Chrome和IE中。我会把CSS贴到横幅上。当我检查这个元素时，Firefox将它显示为一个"div清除“。
这是我说的网页：
CSS：
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
background: #8EBD0F;
width: auto;
}
#cssmenu ul {
list-style: none;
margin: 0;
padd
浏览 2提问于2014-04-19得票数 0
回答已采纳
1回答
Python简单装饰问题
、、、
def my_decorator(some_function):
print("Something is happening before some_function() is called.")
some_function()
print("Something is happening after some_function() is called.")
def just_some_function():
print("Wheee!")
just_some_function = my_
浏览 1提问于2018-03-15得票数 0
回答已采纳
<ul class="bxslider">
<li><img src="remove be me" title="Trappers Turn Bunkers Before" /></li>
<li><img src="remove be me" title="Trappers Turn Bunkers Rennovation" /></li>
<li><img src="remove be my
浏览 3提问于2016-12-22得票数 0
回答已采纳
1回答
根据我的理解，::before应该出现在元素下面，而::after应该出现在元素的上方(以z索引表示)。
在下面的示例中，当一个人悬停在按钮上时，我试图使背景颜色更暗(而不是前景色)。即使我使用了::before，它仍然出现在前面。为什么？我知道我可以用z-index来修复它，但是根据的说法，它有6个问题：
，我认为最好使用:在此之前，您可以得到正确的堆叠顺序，而不必使用z索引。
我不应该这样做，而且命令应该是正确的？
.parent {
--my-color: red;
}
button {
color: blue;
background-color: var(
浏览 8提问于2022-10-28得票数 -1
我不确定为什么python会出现这种行为：
for x in range(5):
print "Before: ",x
if x<3:
x-=1
print "After: ",x
我得到的输出是：
Before: 0
After: -1
Before: 1
After: 0
Before: 2
After: 1
Before: 3
After: 3
Before: 4
After: 4
在第一次迭代中将x的值减少到- 1之后，我并不期望它将x的值更改为1。或者，当我想改变range变
浏览 0提问于2016-03-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
即时通信 IM活动推荐
腾讯云开发者
