Possible to use :before pseudo-selector on itself? - css

For example, something like:
HTML
<p>text</p>
CSS
p:before {
content: " 1";
}
p:before:before {
content: " 2";
}
Which would end up with something like this:
text 1 2
If this isn't possible, is there any way to emulate the same effect?
In my project I have the original text content hidden with font-size:0 and added coloured text in it's place with the :before pseudo-selector.
However, it's 2 words, so I'd like to be able to add more content AFTER the generated content to change the colour.
The "GLB Guide" is generated using :before, but I'd like to be able to make both words different colours.
Hope that made sense!

You want something like following which make you text with two different color:
p:before {
content: " GLB";
color: red;
}
p:after {
content: " Guide";
color: blue;
}
<p></p>

Related

CSS: Store font icon code in css variables

I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}

Making content appear below the :before pseudo selector?

I have an element
<div class="Test_then">The result is ...</div>
The Test_then class looks like this:
.Test_then::before {
content: 'Then';
}
My goal is to have the (The result is ...) appear below the Then content added by the Test_then class. So in other words in would render like this:
Then
The result is ...
If your generated content simply consists of the word "Then" inline, you can just add a newline with \a, and use white-space: pre-wrap (or pre) to cause the newline to render as an actual line break:
.Test_then::before {
content: 'Then\a';
white-space: pre-wrap;
}
An example of this is also provided in the spec.
If your generated content needs to be displayed as a block for any reason, then it becomes even simpler — display: block alone will have the same effect:
.Test_then::before {
content: 'Then';
display: block;
}

re-use strings without losing formatting from the original string-set

I am setting a string for a chapter title using string-set.
When I add content and re-use that string through my document, I would like it to maintain the original formatting of my h1 (font-weight:bold).
How can I do that? I cannot just style the content because the rest of the content("My Document Title") should not be bold.
At the moment, I am using the string as part of a header:
h1{
font-weight:bold;
string-set:chaptitle1 self;
}
#page chap1 {
#top-left {
content: "My Document Title" string(chaptitle1) ;
}
}
Maybe I don't fully understand your question but you should be able to define properties to #top-left region.
example:
#page chap1 {
#top-left {
content: "My Document Title" string(chaptitle1) ;
background-color: #ff0000;
color: white;
}
}
This would show the background of the text red and the text white. This absolutely works in PrinceXML.

Replacing <hr> line with with a custom glyph

I would like to replace horizontal line rendered by default by the <hr> tag with three asterisks (horizontally centered). If possible, I want to achieve this with pure CSS, specifically:
I don't want to touch my markup, there should be just plain <hr>, no helper divs or anything like this (because I'm styling Markdown files);
no background images;
no Javascript.
First I tried:
hr {
width: 0;
}
hr:before {
content: "***";
}
and it almost does the trick, but I want it centered, and have no idea how to center it.
Browsers display <hr>s using borders, so:
hr {
border: none;
}
hr::before {
content: '***';
display: block;
text-align: center;
}
Slap a text-align:center on your psuedo-element.

Why cannot I use html entities in anonymous replaced elements?

Anonymous replaced elements are content used with :before or :after
See https://developer.mozilla.org/en-US/docs/CSS/content
Here is an example:
.valid:after {
content: '<';
color: green;
}
.invalid:after {
content: '>';
color: red;
}
The problem is HTML entities are not replaced by their caracters and I still see their code.
CSS isn't HTML. Simply use
.valid:after {
content: '<';
color: green;
}
In case of need, you may also escape your characters using the unicode hexa.
For example for ▶ :
.valid:after {
content: '\25B6';
color: green;
}
But you don't need to escape < nor >, even if you embed your CSS in the <style> element of an HTML file.
Just in case (it might be less disturbing to your HTML editor), their codes would be \003C and \003E.

Resources