[sarang23592]

Off topic: does anyone know why are the tags and attributes not selectable in the page?

[LeonB]

That’s not off topic at all, very astute observation. Pseudo elements are not part of the DOM. They’re not really there.

Here’s a HTML reference https://www.w3.org/TR/CSS2/selector.html#pseudo-elements

[tannhaeuser]

IMO nothing shows the absurdity of CSS more than before/after rules.

[SamBam]

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.

[sergeykish]

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?

[rimliu]

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.

[mikepurvis]

It's not that unreasonable— it's the same as bullets and numbering in lists not be selectable.

[Santosh83]

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.

[tannhaeuser]

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.

[lqet]

> 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.

[nyanpasu64]

Because they're defined via CSS ::before{content} and ::after{content} properties, and browsers don't make that text selectable for some reason.

[tzot]

It's very useful when having stuff like that:

  <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>

Then the reader can copy the actual code without the interpreter's prompt.

[theandrewbailey]

When text-transform is used on an element, the copy-pasted text is the original text from the DOM, not the transformed version.

There needs to be a CSS property that makes the visible text selectable and copyable.

[cestith]

Preferably there would be a browser option to choose whether or not to do this in the menu for interacting with the selection. The CSS could set the default and the browser could allow you to override it when you're interacting with the text.