CSS：可能有一个不间断的空间：之后？

Question

我想要：将内容粘贴到“hydrique”字词的末尾，以便在它们之间没有换行符。

.openPage:after {
    content: '◱'; //'⎘
    font-size: 11pt;
    line-height: 1.23em;
}

<a class="openPage">Manque d’eau – Stress hydrique</a>

编辑1 我将宽度调整为2行。

小提琴：http://jsfiddle.net/stephanedeluca/4X73W/

编辑2 缺少风格的第一部分;这就是线条断裂的原因。我已相应更新了jsFiddle。

openPage:after {
    font-size: 20px;
    border-radius: 10px;
    background-color: lightgray;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 2px;
    margin-left: 4px;
    display: inline-block;
    text-align: center;
    color: white;
    line-height: 1.0em;

    content: '◱';
    font-size: 11pt;
    line-height: 1.23em;
}

编辑3 我添加了当前结果的屏幕截图。你可以看到两个第一行是OK，而第三行是坏的。

Answer 1

您应该将display:inline-block;添加到.openPage:after并在div元素上增加宽度。

Answer 2

你必须在结束＆lt; / a＆gt;

之前摆脱多余的空间

[编辑2回答] 显示：内联块正在为您搞砸。 删除它，并使用填充来实现图标周围的正确装箱。

Answer 3

我不确定它是否以你想要的方式行事，即:after内容成为流程的一部分，好像它是a链接文本的一部分，另外还有被视为连字机会。

您可以通过在position:relative班级.openPage和position:absolute伪元素.openPage:after上设置.openPage { position: relative; } .openPage:after { content: '◱'; font-size: 11pt; line-height: 1.23em; position: absolute; } 来获得至少部分路线。

<强> DEMO

:after

该解决方案的问题当然是，它会将{{1}}内容从文档流中取出，这意味着它可以在容器的右边缘流血，正如您在示例中所看到的那样我将div宽度更改为115px。

我会把它留在这里作为一个部分解决方案，即使它没有真正实现你想要的东西，希望有人可能觉得它有用。

Answer 4

JS Fiddle

修复的CSS：

.openPage:after {
    content: '◱';
    position:fixed;
}

Answer 5

将display: inline;添加到.openPage:after并将div的宽度增加到150px（或任何需要的内容。

.openPage:after {
    font-size: 20px;
    border-radius: 10px;
    background-color: lightgray;
    width: 150px;
    height: 20px;
    padding: 0;
    margin: 2px;
    margin-left: 4px;
    display: inline-block;
    text-align: center;
    color: white;
    line-height: 1.0em;

    content: '◱';
    font-size: 11pt;
    line-height: 1.23em;
    display: inline;
}