Hacker News new | ask | show | jobs
by tannhaeuser 2073 days ago
IMO nothing shows the absurdity of CSS more than before/after rules.
4 comments

I think it makes perfect sense. CSS is for display, not content. Therefore, anything that gets put in before/after is a display matter only, it's not semantic content. Therefore, it shouldn't be selectable.
You forgot about `user-select`

    * { user-select: none }
now entire page is for display. What is content and what is meta decided by consumer, author can guide, medium creates obstacles. <blockquote> does not copy quotes. Some pages present link as <a href=foo>foo</a>, it would be nice to use

    a::after { content: '(' attr(href) ')' }
but it is not selectable. A lot of pages present anchor as <a>¶</a> on hover, can't be done with CSS. What is missing is

    *::before, *::after { user-select: text }
Nope, it does not work.

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>
    }
Anyone interested?
It show the sanity of CSS rules. CSS is meant for visual formating. Assumption here is that you want to copy the content, not the decoration of it.
It's not that unreasonable— it's the same as bullets and numbering in lists not be selectable.
Can you expand a bit on this? What are the reasons you consider them absurd, and CSS in general?

(honest question) As someone who used pseudo before/after in my own code, I'd be interested in their potential downsides or issues.

Arguing strictly from a language design PoV, and having used before/after myself, if markup is for content/structure, and CSS is for presentation, then it's just idiosyncratic af to generate content from CSS rules. Obviously, the purpose of before/after is to produce a visual effect; then why produce pseudo-content if CSS is oh-so-great a language for presentation? But IMO that's par for the course for CSS which starts out by migrating rendering properties that used to be HTML attributes into their own syntactic category that's neither here nor there, then postulates a structure/presentation dichotomy after the fact. When actually markup attributes are intended exactly for the purpose of holding rendering properties rather than some elusive "structural semantics" bs. Going from there, it feels like CSS heads got lost in their maze of separation of concerns story, which in any case has never needed new syntax, let alone a thousand micro syntaxes.
> Obviously, the purpose of before/after is to produce a visual effect; then why produce pseudo-content if CSS is oh-so-great a language for presentation?

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 &#x1f517; in a:before, you cheaply get vector graphics, and a symbol which (in a perfect world) will always match the font.