CSS pseudo element is not working as expected - html

Question

I created a new style to show errors or any message.
input{
min-width:350px;
padding:10px;
}
.paswd_info_wrap.quick_note_error {
background: #f77777;
color: white;
position: relative;
margin-top: 0;
border-left: none;
font-size: 0.8em;
padding: 10px 20px;
margin-top:10px;
max-width:350px;
font-size:1.2em
}
.paswd_info_wrap {
padding: 10px;
text-align: center;
background: #efefef;
}
.paswd_info_wrap.quick_note_error:before {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: calc(50% - 10px);
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_info_wrap.quick_note_error::after {
right: 0;
bottom: -10px;
transform: rotate(0deg);
top: auto;
left: calc(50% + 40px);
}
.quick_note_error::after {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: 0px;
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
<input type="text" placeholder="write password">
<div class="paswd_info_wrap quick_note_error">
<div class="paswd_err">Password is not given correct.</div>
</div>
I want to add text Error in bottom right as given below in an image.
I have tried to find solution by replacing content:'' with content: 'Error' (in CSS) but it is not working as expected.
IGNORE THIS -
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.

Answer 1

I have tried a combo of clip-path and giving explicit height to the ::after pseudo element with minimal padding,text-align,box-shadow changes and not relying on border,drop-shadow. The following should work for you :-
input{
min-width:350px;
padding:10px;
}
.paswd_info_wrap.quick_note_error {
background: #f77777;
color: white;
position: relative;
margin-top: 0;
border-left: none;
font-size: 0.8em;
padding: 10px 20px;
margin-top:10px;
max-width:350px;
font-size:1.2em
}
.paswd_info_wrap {
padding: 10px;
text-align: center;
background: #efefef;
}
.paswd_info_wrap.quick_note_error:before {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: calc(50% - 10px);
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_info_wrap.quick_note_error::after {
right: 0;
bottom: -10px;
transform: rotate(0deg);
top: 100%;
left: calc(50% + 40px);
}
.quick_note_error::after {
content: 'Error';
position: absolute;
left: 0px;
top: -10px;
padding-right:5%;
padding-bottom:2px;
text-align:right;
height:10px;
clip-path: polygon(9% 100%, 0 0, 100% 0, 91% 100%);
background:#f77777;
font-size:10px;
transform: rotate( 180deg);
box-shadow: inset 1px 1px 2px #f34c4c;
z-index: 10;
}
<input type="text" placeholder="write password">
<div class="paswd_info_wrap quick_note_error">
<div class="paswd_err">Password is not given correct.</div>
</div>
You can experiment with clip path's here as well for more precision - https://bennettfeely.com/clippy/

Answer 2

I just add another pseudo-element to display the text.
input{
min-width:350px;
padding:10px;
}
.paswd_info_wrap.quick_note_error {
background: #f77777;
color: white;
position: relative;
margin-top: 0;
border-left: none;
font-size: 0.8em;
padding: 10px 20px;
margin-top:10px;
max-width:350px;
font-size:1.2em
}
.paswd_info_wrap {
padding: 10px;
text-align: center;
background: #efefef;
}
.paswd_info_wrap.quick_note_error:before {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: calc(50% - 10px);
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_info_wrap.quick_note_error::after {
right: 0;
bottom: -10px;
transform: rotate(0deg);
top: auto;
left: calc(50% + 40px);
}
.quick_note_error::after {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: 0px;
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_err::after {
content: 'Error';
display: inline-block;
position: relative;
top: 24px;
right: 0;
width: 100px;
background: none;
z-index: 99;
font-size: 12px;
filter: drop-shadow(0px 0px 1px red);
}
<input type="text" placeholder="write password">
<div class="paswd_info_wrap quick_note_error">
<div class="paswd_err">Password is not given correct.</div>
</div>