CSS pseudo element is not working as expected

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>