Css 如何将不透明度的两个元素合并为一个？

我需要做一个工具提示，我遇到了一个问题。现在我有这个：

可以看到箭头和矩形看起来不像一个元素。它们都是公共父元素的伪元素：

<div class="progress__control progress__control_to_next">
    ::before   <!-- rectangle -->
    <!-- ... -->
    ::after   <!-- arrow -->
</div>

---

是否可以使其看起来像一个元素？

您没有指定之前的高度。。所以它是根据字体大小计算的。。由于其他一些计算，我假设它不是以像素为单位的整数。 正如实验所示，不同浏览器中该元素的高度不同。。如果没有指定。所以同样取决于字体大小

我能够以一种产生期望结果的方式修改您的代码。但你必须为自己找到价值观

html:

---

在psuedo元素（及其背景色）上有单独的不透明度，有时元素会重叠，从而产生较暗的颜色

移除不透明度和rgba，以支持纯色

您可以调整父元素本身的不透明度，以减少重叠颜色的出现

。进度控制{
颜色：白色；
不透明度：0.75；
}
.进度控制：：之前{
内容：“ааааааааааааП”；
位置：绝对位置；
左：50%；
顶部：50px；
宽度：120px；
转化：translateX（-50%）；
填充：3px6px；
框大小：边框框；
边界半径：2px；
背景色：rgba（48,63,79,1）；
}
.进度控制：：之后{
内容：''；
位置：绝对位置；
左：50%；
顶部：73px；
转化：translateX（-50%）；
框大小：边框框；
宽度：0；
身高：0；
左边框：6px实心透明；
右边框：6px实心透明；
边框顶部：6px实心rgba（48,63,79,1）；
}

---

只需调整线高度（低于18px仅为示例）即可根据需要调整值。。好的

从方形元素生成psedoo元素“arrow”，并应用剪辑路径

然后，您可以使用背景色而不是boder

正文{
背景：浅蓝色；
文本对齐：居中；
}
.进度控制{
颜色：#ffffff；
显示：内联块；
背景色：rgba（48,63,79,0.9）；
边缘顶部：1米；
填充：30px 60px；
框大小：边框框；
边界半径：2px；
背景色：rgba（48,63,79,0.5）；
位置：相对位置；
}
.进度控制：：之前{
内容：“三舍五入”；
}
.进度控制：：之后{
内容：“；
位置：绝对位置；
宽度：40px；
高度：40px；
最高：100%；
左：50%；
转换：翻译（-50%，-50%）；
背景：继承；
剪辑路径：多边形（50%50%，100%50%，50%100%，0%50%）；
}

您是否尝试过将

的
z-index
：after

设置为高于

：：before

？@JamesLong是的，但是，我认为，由于不透明度，它没有解决问题。只是不要让它们重叠，调整位置是否缺少一些CSS？看起来主要的问题是框元素周围的阴影--我不知道如何修复，但如果没有它，元素应该看起来是实心的。。。当我将CSS复制到snippet工具中时，它看起来和预期的一样（没有阴影），您能用它创建一个新的吗？如果我们能够实际检查和调试它，那么提供建议就容易多了。当我将不透明属性移动到父元素时，它真的很有帮助。在此之后，它们重叠而不使颜色变暗。谢谢

.progress__control {
    color: #ffffff;

    &::before {
        content: 'Завершить этап';
        position: absolute;
        left: 50%;
        top: -26px;
        width: 80px;
        transform: translateX(-50%);
        padding: 3px 6px;
        box-sizing: border-box;
        border-radius: 2px;
        background-color: rgba(48, 63, 79, 0.9);
        opacity: 0.8;
    }

    &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: -9px;
        transform: translateX(-50%);
        box-sizing: border-box;
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent; 
        border-top: 6px solid rgba(48, 63, 79, 0.9);
        opacity: 0.8;
    }
}

;lkj;lkj;lkj
lkj;lkj<br>
<br>

<div class="progress__control progress__control_to_next">

  asdasdaasdasd

</div>
kjhlkjhlkjh
lkjhlkjh

body{
background:rgba(0,0,0,.1);  
}
.progress__control {
    color: #ffffff;
position:relative;
  width:200px;
  height:20px;
    &:before {
        content: 'Завершить этап';
        position: absolute;
        left: 50%;
        top: -26px;
        height:26px;
        width: 180px;
        transform: translateX(-50%);
        padding: 3px 6px;
        box-sizing: border-box;
        border-radius: 2px;
        background-color: rgba(48, 63, 79, 0.9);
        opacity: 0.8;
    }

    &:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
        box-sizing: border-box;
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent; 
        border-top: 6px solid rgba(48, 63, 79, 0.9);
        opacity: 0.8;
    }
}

*::after,*::before{
             line-height: 18px; 

          }