如何在父元素上方（和旁边）放置 ::before 伪元素而不影响父元素的位置答案

【问题标题】：How to put a ::before pseudo-element above (and next to) the parent element without affecting the parent's position如何在父元素上方（和旁边）放置 ::before 伪元素而不影响父元素的位置
【发布时间】：2015-06-17 12:00:47
【问题描述】：

我有一个fieldset，其中包含一个legend，它有一个::before 伪元素，我希望这个伪元素位于legend 上方而不影响legend 的位置。

HTML：

<fieldset>
    <legend>THE TEXT</legend>
</fieldset>

CSS：

legend {
    padding:0 14px;
}

legend::before {
    content:'BEFORE ';
    color:red;
}

JSFiddle demo

我尝试添加 legend::before { vertical-align:super }，但它会将 legend 元素如下所示：

JSFiddle demo superscript (without success)

欢迎任何想法来实现这一点。

【问题讨论】：

“上面和旁边”是什么意思？可以发张图片吗？

标签： html css pseudo-element

【解决方案1】：

在伪元素上使用position: absolute;，如下所示：

legend {
    padding:0 14px;
    position: relative;
}

legend:before {
    content:'BEFORE';
    color:red;
    position: absolute;
    top: -20px;
}

看到这个jsFiddle

编辑：

如果您希望文本出现在图例旁边，请使用left 属性。

查看更新的jsFiddle

【讨论】：

你可以同时使用top和left属性来定位你的before元素
添加 left: 2px; - 更改 px 值以满足您的需求

【解决方案2】：

我刚刚为我自己的问题找到了解决方案，将display:block; 和float:left 添加到::before 使其按我的意愿工作。然后我可以根据需要为元素添加边距，而不会影响图例：

传说{ 填充：0 14px； }

legend::before {
    content:'BEFORE';
    color:red;
    float:left;
    margin-top:-5px;
    padding-right:5px;
}

JSFiddle demo

【讨论】：

请注意，如果您使用float: left，display 将计算为block，即使您使用例如display: inline。所以不需要display: block。
@Oriol 是的，我知道但现在没有考虑，谢谢提醒！