Menu
Look this very simple code
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "Before - ";
}
</style>
</head>
<body>
<p>Hello</p>
<p>Bye</p>
</body>
</html>
Css adds ¨Before -" at the start of every <P> and renders like this
If you use your mouse to select the text (for copy paste) you can select the original text, but not the Before or Aftter text added by css.
I have a very specific requirement where I need to allow users to select with the mosue the Before text. How would you do it?
874
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
This cannot be done within an HTML page, but as a hack, if you need to copy/paste pseudo elements, you can export the page to PDF and copy from it. In Chrome, for example, you can copy page's content from print preview.
154
You can't, the before and after pseudo classes are not meant to be used for that purpose.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
