Off topic: does anyone know why are the tags and attributes not selectable in the page?
Here’s a HTML reference https://www.w3.org/TR/CSS2/selector.html#pseudo-elements
(honest question) As someone who used pseudo before/after in my own code, I'd be interested in their potential downsides or issues.
Because sometimes the best way to style something is by using a character (bullet points, arrows, ...). Example: you could add a symbol to URLs by giving <a> a slight padding on the left and by adding an image showing an URL symbol. But by using 🔗 in a:before, you cheaply get vector graphics, and a symbol which (in a perfect world) will always match the font.
* { user-select: none }
a::after { content: '(' attr(href) ')' }
*::before, *::after { user-select: text }
Best tool so far is XSLT, I've written prototype that mimics CSS syntax
quote {
content-before: '"'
content-after: '"'
}
a {
content-after: '(' @href ')'
}
h2 {
content-before: <a href=@href>¶</a>
}
<style type="text/css">
.code-line::before {content: '>>> ';}
</style>
<div class="code-line">print 12</div>
<div class="code-line">a = [i**2 for i in range(10)]</div>
There needs to be a CSS property that makes the visible text selectable and copyable.