CSS pseudo-elements and pseudo-classes: before, after, hover, active, etc. - an effective opportunity to qualitatively improve and simplify the execution of the site, without including JavaScript handlers in the code for obvious design decisions, element events, dialogs, and visitor actions that do not require complex reactions.
Pseudo-elements are convenient, multifunctional, possess significant and multivariate properties for fulfilling simple and complex author’s ideas: how to attract attention in an original way, to imperceptibly clarify actions, to display the necessary hint in the right place.
Great prospects open when url () is specified in the contents of the pseudo-element. Indeed, this option opens up new horizons, both in terms of downloading something to the page of the site, and in the possible activation of something somewhere
Distinctive feature of pseudo-elements
(::before CSS, ::after) , , . , , , , content - .
::before CSS , ::after - . , CSS, HTML. , , before after . , , , , CSS.
CSS, before after ":", CSS3 "::". : .
, , div class='scElement' "Element" , CSS-:
.scElement {
POSITION...;
z-index...;
...
},
":hover" "::before" CSS:
.scElement:hover::before {content:'prefix'; color...; background-color...;}.
'Element' 'prefix', .
, , - scElement. url, content: url('/scBox/rm-v/sc-rights.png') . content: "\03B1" "alfa", : " ", "<", "«", "»" - .
: "", url(), , : open-quote/close-quote no-open-quote/no-close-quote . , , before, CSS , .
before after. , CSS before content , , , , JavaScript-.
":", , CSS3 "::". , , . , , ( ) , :
scElement:hover::before { content: 'prefix'; ... }
scElement:active:after { content: 'suffix'; ... }
: CSS before . . - . DOM - .
":" "::" , .
. . - , CSS before, after, , , content url(). , , , , .
( - ) , , , .