之后的html伪元素的对齐

Question

How I can make center align my pseudo-element after? Like margin: 0 auto; for block elements.

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

CSS code:

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

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

It after element look like simple triangle. Property margin: 0 auto; does not work.

Answer 1

If you want the pseudo element centered horizontally relative to the text, you set the display of the targeted element to inline-block so that the width shrinks to fit the content. Then remove the absolute positioning from the pseudo element and margin: auto will work as expected.

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> 

If you don't want the pseudo element centered horizontally relative to the text, don't set the element to inline-block - (example)