html – 意外重复：在分配给SVG的伪元素后：文本.使用伪元素和SVG

2024年1月31日 381次阅读

这是一个由两部分组成的问题,见下文.

尝试通过CSS将％符号添加到SVG文本的实例时使用：after伪元素我遇到了这个问题(提供了JsFiddle).我使用的是Chrome版本24.0.1312.57.

HTML：

<span class="percentage2">This is 20</span>
<p class="percentage2">This is 20</p>
<h1 class="percentage2">This is 20</h1>
<div class="wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="20" y="20" style="fill:black;" class="percentage2">This is 20</text>
    </svg>
</div>

CSS：

.wrapper {
    width: 300px;
    height:80px;
    overflow:hidden;
}

.percentage2:after {
    content:"%";
    display: inline-block;
    font-size: 0.7em;
    position:relative;
    left:100px;
}

意外的结果是％符号出现两次：一次出现在包装元素的最左边,一次出现在应该放置的位置.

第一个问题：为什么会发生这种情况？

如果我没有指定显示：inline-block：在将内容作为内联插入HTML元素后,但不会出现在SVG中.

CSS：

.percentage1:after {
    content:"%";
    font-size:0.7em;
}

截图：

第二个问题：有没有办法将内联伪元素添加到SVG文本元素？应用时支持哪些其他显示模式：元素到SVG元素之后？

最佳答案 就像Duopixel写的那样,SVG不支持CSS：在应用于svg元素的伪元素之前或之后. SVG可能会在将来允许这样做,但是仍然没有定义它应该如何工作.

点赞