Question

我有以下CSS，它在元素后面添加了一些文字：

header h1:after {
    content:"Bold \A not bold";
    white-space: pre;
}

我的目标是使第一个单词变为粗体，而其余部分则不是粗体。

我知道如何使所有文本变粗，我知道我可以使用HTML实现这一点，但就我目前的目的而言，我想尝试使用CSS实现这一目标。

对谷歌没有搜索结果，可以吗？

Answer 1

好的，这对创意解决方案有何影响？将文本绘制为SVG，并将其用作数据URI形式的content伪元素的:after值：

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/

我认为这与您在单个伪元素上进行富文本格式化非常接近。

注意：我在Chrome上对此进行了测试，但我认为IE要求您将SVG代码编码为有效的URI（即您需要对所有这些括号，空格等进行编码）。您可以使用工具like this。

Answer 2

你可能会将句子分成两个伪元素，如下所示：

h1 { font-weight: normal; display: table; }

h1:after {
    content:" Bold";
    font-weight: bold;
}

h1:before {
    content:"not bold";
    display: table-footer-group;
}

Codepen：http://codepen.io/anon/pen/RWbQVw

此处我使用display: table-footer-group; :before伪元素，以便将其置于:after伪元素

下方

Answer 3

根据Jared的回答，这里有一些有用的标签包含在网址中：

开始

content:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><text style='alignment-baseline:hanging;font-size:14px;font-family:Arial,sans-serif;fill:#008ef4;'>

新行

<tspan x='-4' dy='14'> </tspan>

这是将光标向下移动14px，并将其设置为绝对-4 px x以考虑空间（空间必须在那里或标签不会渲染）

粗体

<tspan style='alignment-baseline:inherit;font-weight:bold;fill:#5b5b5b;'> Your Text Here </tspan>

<强>斜体

<tspan style='alignment-baseline:inherit;font-style:italic;fill:#5b5b5b;'> Your Text Here </tspan>

<强>结束

</text></svg>");

这是一个小提琴：

JSFiddle

这是我将html转换为此SVG代码的google工作表:(请记住，这只适用于<b>, <i>, <br>代码）

Google Sheet

Answer 4

来源：https://css-tricks.com/a-call-for-nth-everything/

您可能正在寻找:first-word

CSS内容粗体单词

4 个答案: