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比我之前定位的版本更长时，它会发生这种情况：

ex2

或当strlen更短时：

ex3

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

非常感谢。

Answer 1

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

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

  right: 15px;

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

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

<强>编辑

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

update

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

最后，我把箭头放在应该的位置。

您不能相对于“父”元素

定位伪元素（如:: after）

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

1 个答案:

update