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

概述这是一个由两部分组成的问题,见下文. 尝试通过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= 这是一个由两部分组成的问题,见下文.

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

HTML：

<span >This is 20</span><p >This is 20</p><h1 >This is 20</h1><div >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <text x="20" y="20"  >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可能会在将来允许这样做,但是仍然没有定义它应该如何工作. 总结

以上是内存溢出为你收集整理的html – 意外重复：在分配给SVG的伪元素后：文本.使用伪元素和SVG全部内容，希望文章能够帮你解决html – 意外重复：在分配给SVG的伪元素后：文本.使用伪元素和SVG所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。