Css 对于间隔字母类型和标点符号有更好的解决方案吗?

Css 对于间隔字母类型和标点符号有更好的解决方案吗?,css,typography,punctuation,letter-spacing,Css,Typography,Punctuation,Letter Spacing,根据排版规则,如果后面有标点符号,则空格后不应有空格,如果后面有无空格的文本,则空格更大。间距文本左侧的空格类似 我当前的解决方案:` <!DOCTYPE html> <html> <head> <style> h1 { font-size: 1.5em; } .spaced { letter-spacing:0.5em; } .spaced:before { content:''; margin-left:0.5em; } /* .spac

根据排版规则,如果后面有标点符号,则空格后不应有空格,如果后面有无空格的文本,则空格更大。间距文本左侧的空格类似

我当前的解决方案:`

<!DOCTYPE html>
<html>
<head>
<style>
h1 { font-size: 1.5em; }

.spaced { letter-spacing:0.5em; }
  .spaced:before { content:''; margin-left:0.5em; }
/* .spaced:after  { content:''; margin-right:0.5em; } */

h1 span { border: 1px solid red;}

.dot_before:before  { content:''; margin-left:-0.0em; }
.dot_after:after    { content:''; margin-right:-0.5em; }

</style>
</head>
<body>
<h1>A. "<span>Plain</span>"</h1>
<h1>B. "<span class='spaced'>Spaced only</span>"</h1>
<h1>C. "<span class='spaced dot_before dot_after'>Before and after</span>"</h1>
<h1>D. Normal <span class='spaced'>Spaced</span> Normal.</h1>
<h1>E. <span class='spaced dot_before'>Spaced</span> Normal.</h1>
</body>
</html> 

h1{字体大小:1.5em;}
.间隔{字母间距:0.5em;}
.spaced:在{content:''之前;左边距:0.5em;}
/*.spaced:在{content:''之后;右边距:0.5em;}*/
h1跨距{边框:1px实心红色;}
.dot_before:在{内容:''之前;左边距:-0.0em;}
.dot_after:after{content:'';右边距:-0.5em;}
A.“普通”
B.“仅间隔”
C.“之前和之后”
D.正常间隔正常。
E.间隔正常。
这意味着,它需要根据前面或后面的标点符号设置额外的类,而不是在其他情况下。对于内容编辑JavaScript,人工编辑器或服务器端必须小心

有人知道更简单的解决方案吗


编辑:注释掉不必要的规则,添加示例D和E,以确保通缉行为的完整性。B.是不需要的。

为什么不使用
文本缩进
?代替所有前后伪元素,无法查看
文本缩进
如何适用于所有普通、间隔和标点符号的组合。增加了两个例子。但是谢谢,我可以删除一条规则。