CSS 伪元素未按预期工作答案

【问题标题】：CSS pseudo element is not working as expectedCSS 伪元素未按预期工作
【发布时间】：2021-03-11 12:09:54
【问题描述】：

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

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: 'Error'（在CSS）替换content:''来找到解决方案，但它没有按预期工作。

忽略这个 -

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

【问题讨论】：

如果你收到一条消息说“看起来你的帖子主要是代码；请添加更多细节。”，那么这意味着您应该完全这样做 - 添加更多细节，或减少代码量 - 而不添加填充内容。
@CBroe 这里有没有不能理解我的问题的用户？
这不是重点，重点是，请不要添加随机东西，只是为了绕过此类验证和检查。它们的实施是有原因的。
但我想不出这个问题还需要什么信息。这就是为什么我添加了一些随机词（如 lorem ipsum）。

标签： html css pseudo-element

【解决方案1】：

我尝试了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;
}

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

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

【讨论】：

Clip-path 确实符合我的要求。所以我想我必须用position:absolute向'paswd_info_wrap'添加另一个子元素，然后它才能工作。
不是你想要的输出吗？
border、drop-shadow 和 box-shadow 是必须的。别担心，我会再添加一个孩子。
@Abhishekkamal 我明白了。无论如何，这是一个模棱两可的要求。下次在您提出的问题中更清楚地说明您希望在不操纵现有 css 的情况下实现相同的功能。贡献者更容易专注于此。

【解决方案2】：

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

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>

【讨论】：

谢谢！但我已经知道这一点，但我想像我在问题描述中描述的那样做。