我有以下 CSS，它在元素后添加一些文本：
header h1:after {
content:"Bold \A not bold";
white-space: pre;
}
我的目标是使第一个单词加粗，而文本的其余部分不加粗。
我知道如何使所有文本变为粗体，并且我知道可以使用 HTML 来实现此目的，但就我目前的目的而言，我想尝试使用 CSS 来实现此目的。
google 没有搜索到这个结果，可以吗？
好的，这个创意解决方案怎么样？将文本绘制为 SVG，并将其用作content的值:after数据 URI 形式的伪元素：
header h1:after{
content:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='14' width='85'><text style='alignment-baseline:hanging;font-size:14px;font-family:Arial,sans-serif;fill:#000;'><tspan style='alignment-baseline:inherit;font-weight:bold;'>Bold</tspan> not bold</text></svg>");
}
这是在行动中：http://jsfiddle.net/ojx5s0kc/1/ http://jsfiddle.net/ojx5s0kc/1/
我认为这与您在单个伪元素上获得富文本格式一样接近。
Note:我在 Chrome 上对此进行了测试，但我相信 IE 要求您将 SVG 代码编码为有效的 URI（即您需要对所有这些括号、空格等进行编码）。你也许可以使用一个工具像这样 http://meyerweb.com/eric/tools/dencoder/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
