How to join 2 elements with opacity to look like one?

how to remove opacity from child elements
css background opacity without affecting text
css text opacity
opacity css
css background image opacity without affecting text
background-color opacity css
non-transparent elements inside transparent elements
border opacity css

I need to make a tooltip and I'm clashed with a problem. Now I have this:

You can see that arrow and rectangle don't look like one element. They're both pseudo-elements of common parent element:

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

Their styles:

.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;
    }
}

Is it possible to make it looks like one element?

Having the separate opacities on the psuedo-elements (and their background colors), there's a chance where sometimes the elements will overlap, creating a darker color.

Remove the opacity and rgba, in favor of solid colors.

Potentially, you can adjust the opacity on the parent element itself, with less of an occurrence of the overlapped colors...

.progress__control{
  color: white;
  opacity: 0.75;
}

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

.progress__control::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 73px;
    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, 1);
}
<div class="progress__control"></div>

Non-Transparent Elements Inside Transparent Elements, .bar { height: 4em; padding-top: 2em; opacity: 0.5; background: black; As far as I know, there is just no way to force those child elements to be an less because an element occupies the same space as another element, doesn't make one a  Zero percent opacity means that the layer is invisible and 100 percent opacity means nothing is visible beneath it. Select "Merge" or "Flatten" to merge the layers together to create one new image. After you click this command, it's no longer possible to adjust the layers separately so make sure the image appears exactly as you want it beforehand.

Make the pseduo-element "arrow" from a square element and apply a clip path.

Then you can use a background color rather than boder.

body {
  background: lightblue;
  text-align: center;
}

.progress__control {
  color: #ffffff;
  display: inline-block;
  background-color: rgba(48, 63, 79, 0.9);
  margin-top: 1em;
  padding: 30px 60px;
  box-sizing: border-box;
  border-radius: 2px;
  background-color: rgba(48, 63, 79, 0.5);
  position: relative;
}

.progress__control::before {
  content: "Завершить этап";
}

.progress__control::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: inherit;
  clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}
<div class="progress__control">
</div>

opacity, Values are a number from 0 to 1 representing the opacity of the channel (the “​alpha” channel). When an element has a value of 0 the element is  First, select the image in the top layer. Then, adjust the opacity to 70%. 2. Then, 50% Opacity. Again, select the image in the top layer and now adjust the opacity to 50%. 3. Third, 30% Opacity. This time, select the image in the top layer and adjust the opacity to 30%. As you can see above, each percentage of opacity looks a little different.

You don't have height for the :before specified.. so it is calculated from font size.. which I assume is not an integer in pixels due to some other calculations. And as experiment shown height of this element differs between browsers.. if not specified. So again depends on font size.

I was able to modify your code in a way that produces the desired result. But you'll have to figure out values for yourself.

https://codepen.io/Alexander-Taran/pen/JBpJKw

html:

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

<div class="progress__control progress__control_to_next">

  asdasdaasdasd

</div>
kjhlkjhlkjh
lkjhlkjh

scss:

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;
    }
}

CSS Opacity Tips: Learn to Use CSS to Create a Transparent , Find tips and examples of using CSS opacity property right here. Set the CSS Opacity for HTML Elements Such as Images and Text Boxes Contents. 1. Setting Opacity of Images; 2. Opacity on Hover; 3. CSS transparent background for boxes by adding the opacity property to multiple <div> elements. Paint on the layer mask to blend the two images smoothly. Keep blending until the image looks to be a natural part of the frame. The final blended image – two combined into one. Repeat the steps as many time as necessary. Adding or Changing a Background. Adding a new background is quite possibly the most common use of the image merging skill

just play with line height (below 18px is just example) adjust value as per requirement.. will be OK

CAN CHECK HERE

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

          } 

opacity, The element is translucent (that is, content behind the element can be seen). 1 (​default value), The element is fully opaque (visually solid). Formal  One of the most powerful aspects of Adobe Photoshop is its ability to combine images to form imaginative composites. Add texture to an image. Create a textured look with blend modes. Layer Blend Modes are a quick way to blend 2 images together. One of the many situations in which Blend Modes are useful is to add a textured look to an image.

Digital Photography All-in-One Desk Reference For Dummies, The elements on top of the background remain visible, but their slightly see-​through nature integrates them more fully with the image as a whole. Figure 1-28​  Join a meeting using one of these methods: Click Join a Meeting if you want to join without signing in. Sign in to Zoom then click Join. Enter the meeting ID number and your display name. If you're signed in, change your name if you don't want your default name to appear. If you're not signed in, enter a display name. Select if you would like

CSS Image Opacity / Transparency, In this case we want the image to NOT be transparent when the user hovers over the text inside a fully transparent element hard to read: opacity 1. opacity 0.6.

CSS Colors, The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent). The opacity property value must be a 

Comments
  • Have you tried setting the z-index of the ::after to higher than the ::before?
  • @JamesLong yes, however, I think, because of opacity it didn't solve the problem.
  • simply don't make them to overlap, adjust position
  • Is some of the CSS missing? looks like the main problem is the shadow around the box element -- which I don't know a fix for, but without it the elements should look solid together... when I copied the CSS into the snippet tool, it looked as expected (without a shadow)
  • Could you please create a minimal reproducible example with it? It would be so much easier to provide advice if we could actually inspect and debug it.
  • It really helps when I moved opacity property to parent element. After this they overlap without making a color darker. Thanks.