html - 如何显示:after content outside element

Question

在下面的例子中，我怎样才能让 :after 生成的文本在 span 的框外？ (它目前在内部呈现，即它使 span 元素更宽)

HTML

<span class="my">Boxtext</span>

CSS

span.my {
    padding:            4px 8px;
    background-color:   red;
    display:            inline-block;
    border-radius:      10px;
    margin-left:        20px;
    }   
span.my:after {
    content:            " text that is supposed to come after the box";
    }

我猜这有点类似于list-style-position，你可以选择inside or outside...

Answer 1

我相信 CSS 内容被认为是其渲染对象的一部分。您可以提出 :after 应该命名为 :append 的论点。

对于您的情况，您可以尝试在 span.my 中放置一个额外的元素:

<span class="my"><span>Boxtext</span></span>
span.my span { ... }
span.my:after { ... }

或专门设计内容样式。

span.my:after { 
    content:            " text that is supposed to come after the box";
    background-color:   white;
    position:           absolute;
    margin-left:        10px;
}