如何使用伪类：之前/：之后？

Question

您好，我在使用 css pseudo classes :before 和 :adter 来回显来自 div 层上的 php 的不同错误消息时遇到了问题。

在input field 旁边，我想显示div layer。因此我使用z-index method，因为那个 div 在身体的前面。

现在我的问题是 div 层应该以与字符串长度不同的长度出现。在另一个问题中，有人给了我提示，而不是使用额外的 div 作为箭头，然后使用 div 层将两者合并为一个。因此，我在网上找到了使用pseudo classes 并创建speechbubble 的提示。当我寻找它时，我发现几乎所有地方都一样。

div 层是相对对象，箭头是子对象。在我的情况下，它需要反过来。箭头必须是相对对象，因为它的 fixed position 在输入字段旁边。 div layer 的长度是可变的，但应附加到箭头的左侧。

所以我遇到的问题是设置css时不会显示div层：

.wrapper #header #navline form .erm { //the div layer for the arrow that will be placed next to the input field
    position:absolute;
    z-index:2;
    width: 0px;
    margin-left: -25px;
    margin-top: -10px;
    height: 0px;
    border-top: 20px inset transparent;
    border-left: 22px dashed #f23;
    border-bottom: 20px inset transparent;
}
.wrapper #header #navline form .erm:before { // to border arrow
    content:"";
    position:absolute;
    z-index:2;
    margin-left: -22px;
    margin-top: -17px;
    width: 0px;
    height: 0px;
    border-top: 17px inset transparent;
    border-left: 19px dashed #f2f2f2;
    border-bottom: 17px inset transparent;
}
.wrapper #header #navline form .erm.left { //the wrapper with the text that should be append left to the arrow
    content:"";
    color: #F23;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:12px; 
    white-space: nowrap; 
    line-height: 26px;
    font-family:Arial, Helvetica, sans-serif;
}

这里是html：

<?php if (empty($errors['a']) === false){?>
    <input class="error" type="text" id="a" name="a" value="<?php echo isset($a) ? $a : '';?>" />
<div class='erm'>
    <?php echo $errors['a'][0];?>
</div>
<?php }?>

我做了一些截图来展示我想要归档的内容。

它应该是这样的：

好的，这就是我以前的样子。如图有红色箭头，上面的灰色层和文本的div层，什么都不可见。

所以当将 div 层设置为相对对象时，当 strlen 比我之前定位的那个版本长时会发生这种情况：

或者当 strlen 更短时：

所以如果有人可以帮助我，我真的很感激。

非常感谢。

Answer 1

我认为您几乎拥有所需的一切。 我会说您缺少的唯一细节是如何定位您的气泡。 尝试只设置正确的属性

.wrapper #header #navline form .erm.left { 

  right: 15px;

这应该将右边框锚定在您想要的位置，如果宽度发生变化，它将是左侧移动。

注意：上面的像素值我没有检查，只是一个例子

编辑

你的小提琴我已经尽力了：

update

我添加了输入以使其更类似于我认为您想要的。 然后我将您的 div（文本所在的位置）定位为绝对匹配输入位置，但使用正确的属性。这样您就不必担心文本长度。您只需要考虑为箭头留出一些空间。

最后，我把箭头放在它应该在的地方。

您不能相对于“父亲”元素定位伪元素（如 ::after）