html - 如何使用伪类:before/:after?

Question

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

在输入字段旁边我想显示一个div层。因此，我使用 z-index 方法 因为那个 div 是 body 的前面。

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

div 层是相对对象，箭头是子对象。就我而言，它需要反过来。箭头必须是相对对象，因为它位于输入字段旁边的 固定位置。 div 层 的长度可变，但应附加到箭头的左侧。

所以我遇到的问题是，当设置 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;

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

注意:上面的像素值我没有查过，只是举例

编辑

我已经尽力使用你的 fiddle 了:

update

我已经添加了输入以使其更接近我认为您想要的。 然后我将您的 div(文本所在的位置)定位为完全匹配输入位置，但使用正确的属性。这样您就不必担心文本长度。您只需要考虑为箭头留出一些空间即可。

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

你不能相对于“父”元素定位伪元素(如::after)