Do not rotate label in before - css

Question

I have before like below and I want rotate just background not label.
How I can do it ?
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before {
content: 'lable';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>

Answer 1

You can add :after with div and add content
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div:after {
content: 'Lable';
font-size: 11px;
position: absolute;
left: -5px;
top: -29px;
color: #fff;
}
div::before {
content: '';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>

Answer 2

transform: rotate (45deg);
Will rotate the complete element, including content and background.
If you want to rotate only the background then you need to keep the background separate or you can add your label in actual element instead of pseudo-element.

Answer 3

You can put the text into an after pseudo element which is not rotated.
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before,
div::after {
position: absolute;
left: -5px;
top: -33px;
width: 22px;
height: 22px;
}
div::before {
content: '';
background: red;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
}
div::after {
content: 'lable';
color: white;
}
<div></div>
However, be aware of accessibility issues. That text may not get read out by a screen reader and if it is important for the user to know it is there is may be better to put the text in a label element actually within the HTML. You can still style it the same way so it is within the red 'bubble'.