CSS 伪元素未按预期工作

如何解决CSS 伪元素未按预期工作

我创建了一个新样式来显示错误或任何消息。

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>

我想在右下角添加文本错误，如下图所示。

我试图通过将 content:'' 替换为 content: 'Error'（在 CSS 中）来寻找解决方案，但它没有按预期工作。

忽略这个 -

看起来你的帖子主要是代码；请添加更多详细信息。
看起来您的帖子主要是代码；请添加更多详细信息。

解决方法

我尝试了 <div id="wrapper"> <div id="sidebar"> <ul> <li> <button> Button 1 Button 1 Button 1 </button> </li> <li> List item with nested ul and a long text <ul> <li> <button> Nested 1 </button> </li> <li> <button> Nested 2 </button> </li> <li> <button> Nested 3 Has Really Long Text That Should Force Ellipsis </button> </li> </ul> </li> <li> <button> Button 3 </button> </li> <li> <button> Button 4 </button> </li> </ul> </div> <div id="content"> <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit. Maecenas ultrices sem ac euismod rutrum. Mauris gravida pellentesque eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin cursus,odio ut molestie commodo,eros dolor dignissim ante,id dapibus est turpis non enim. Donec eget congue lorem. Praesent consequat magna ac sollicitudin pulvinar. Mauris varius sem dui,at convallis augue tempus eget. </p> </div> </div> 的组合，并以最小的 clip-path、height、::after 为 padding 伪元素提供显式 text-align变化而不依赖于 box-shadow,border。以下应该对你有用:-

drop-shadow

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

您也可以在此处尝试剪辑路径以获得更高的精度 - https://bennettfeely.com/clippy/

,

我只是添加了另一个伪元素来显示文本。

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>