Mark space for: after content doesn't crash
I am adding a small graphic flag to the end of the items in the navigation using: after. for example
.navTreeItem .state-restricted:after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: red;
border-radius: 5px;
}
Currently, if a small flag hits the end of a line, it will itself go to the next line, for example.
- Navigation item one
{flag}
- Navigation item two
However, to avoid widow checkboxes, I would like the space in front of the flag to have no breaks, so instead it would look like this:
- Navigation item
one {flag}
- Navigation item two
I cannot use white-space: nowrap because I want the text to wrap. Any thoughts?
source to share
I'm afraid the problem is that when you set display: inline-block
in a pseudo-element, it becomes an element that is treated as external to the text (comparable to the image) and can be wrapped in the next line even if it immediately follows the character. And if you use the default by default display: inline
, the property width
doesn't refer to it, so it just doesn't do what you want.
But you can consider a different approach. Instead of using CSS to create a visual that looks like a filled circle, for example, you can use a symbol such as U + 25CF BLACK CIRCLE "●" and color it as desired. This sets up obvious limitations, as the shapes you would like to use may not exist as symbols, or these symbols may not be well supported in fonts. But in simple cases, the approach can be feasible:
.navTreeItem .state-restricted:after {
content: "\25cf";
color: red;
}
<div class=navTreeItem>
<div class=state-restricted>I really, really, really do want to prevent any
line break between this text and the :after pseudo-element.</div>
</div>
source to share