CSS带状标题

我正在尝试为标题获得类似于缎带的横幅效果：

我的标记是：

<header>
    <div id="logo">
        <img src="">
    </div>
</header>

然后是另一个用于“阴影折叠”的

：before

和

：after

伪元素

我的问题是：如果我最终这样做，我将不得不在

#logo

和

之间插入另一个

div

，以便为底部的“阴影折叠”添加另一对

:before

和

：before

伪元素，我想我在

元素上使用伪元素时遇到了问题（什么也没有出现）

你能给我点启示并指引我正确的方向吗？也许有一个简单的方法可以“缩小”这个

编辑

因此，

：before

和

：after

不能与

一起使用。谢谢您提供的信息：）

我想知道的是，是否有其他方法来实现我的愿望，而不是包装P

i、 e:有没有办法使

#logo

比

大，尽管它是孩子，而且高度相同（因为

始终与

高度相同）

---

谢谢

我想你说得对。我会使用边框，但我会让您的伪元素位于徽标后面，如下所示：

body，html{margin:0；padding:0；}
标题{
背景：#eee；
文本对齐：居中；
利润率：1米0；
}
#标志{
显示：内联块；
垂直对齐：顶部；
位置：相对位置；
保证金：-0.5em 0；
}
#logo:before，#logo:after{
内容：''；
位置：绝对位置；
宽度：100%；
左：-0.25em；
边框：0实心透明；
边框宽度：0.5em 0.25em；
颜色：#aaa；/*设置为只需在一个位置设置边框颜色。
如果未指定，边框颜色与文本相同
颜色*/
}
#标志：以前{
边界顶部：无；
边框底色：首字母；
排名：0；
}
#标志：之后{
边框底部：无；
边框顶部颜色：首字母；
底部：0；
}
#标志img{
位置：相对位置；
显示：块；
z指数：1；
}

---

我认为你的思路是对的。我会使用边框，但我会让您的伪元素位于徽标后面，如下所示：

body，html{margin:0；padding:0；}
标题{
背景：#eee；
文本对齐：居中；
利润率：1米0；
}
#标志{
显示：内联块；
垂直对齐：顶部；
位置：相对位置；
保证金：-0.5em 0；
}
#logo:before，#logo:after{
内容：''；
位置：绝对位置；
宽度：100%；
左：-0.25em；
边框：0实心透明；
边框宽度：0.5em 0.25em；
颜色：#aaa；/*设置为只需在一个位置设置边框颜色。
如果未指定，边框颜色与文本相同
颜色*/
}
#标志：以前{
边界顶部：无；
边框底色：首字母；
排名：0；
}
#标志：之后{
边框底部：无；
边框顶部颜色：首字母；
底部：0；
}
#标志img{
位置：相对位置；
显示：块；
z指数：1；
}

我用你的HTML/CSS设置了一个链接，你能链接一个图像来演示你遇到的问题吗？：在不为imgYes工作之前和之后，当你开始编辑它时，它会自动分叉到一个新的代码笔中。这样做之后，请确保共享fork的链接。图像不支持伪元素。您需要将其包装在收缩包装的div中。可能与您的HTML/CSS中的I Setup a重复，您可以链接一个图像来演示您遇到的问题吗？：在不为imgYes工作之前和之后，当您开始编辑它时，它会自动将其分叉到新的代码笔中。这样做之后，请确保共享fork的链接。图像不支持伪元素。您需要将其包装在收缩包装的div中。可能是perfect的副本！正是我要找的！你甚至不需要把它包起来，包起来，包起来，很高兴我能帮上忙。：）完美的正是我要找的！你甚至不需要把它包起来，包起来，包起来，很高兴我能帮上忙。：）

#logo-wrap img:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: #000;
}