Question

我怎样才能让中心对齐我的伪元素？喜欢保证金：0自动;对于块元素。

<div>
    This is test text. This is test text. This is test text.
</div>

CSS代码：

  div:after {
    position: absolute;
    display: block;
    content:"";

    border-color: #EAB920 transparent transparent transparent;
    border-style: solid;
    border-width: 2.5em;
    width: 0;
    height: 0;
}

元素看起来像简单的三角形。物业保证金：0自动;不起作用。

Answer 1

如果您希望将伪元素水平居中 relative 到文本，则将目标元素的display设置为inline-block，以便宽度缩小以适合内容。然后从伪元素中删除绝对定位，margin: auto将按预期工作。

Example Here

.target {
    display: inline-block;
}
.target:after {
    content: '';
    display: block;
    margin: auto;
    border-color: #EAB920 transparent transparent transparent;
    border-style: solid;
    border-width: 2.5em;
    width: 0;
    height: 0;
}

<div class="target">This is test text. This is test text. This is test text.</div>

如果您不希望伪元素相对于文本水平居中，请不要将元素设置为inline-block - (example)

html伪元素对齐后

1 个答案: