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
Pseudo-elements (:: before CSS, :: after) differ from elements, selectors and pseudo-classes in that they do not initially exist in the document tree. Perhaps in practice this is not particularly important, but if we consider the issue of placing content on the site’s pages, then trusting the content property does not make sense for the search engine.
The :: before CSS pseudo-element allows you to add content before the element, and :: after - after. Content can range from simple text to complex formatting in terms of CSS properties, but not HTML tags. A pseudo-element can be absolutely positioned inside the element to which it is attached, therefore the meaning of before and after is relative and mobile. You can not only specify the position, but also the sizes, colors, background, fonts and use other CSS properties.
Like CSS pseudo-classes, before and after are preceded by a ":" character, but the CSS :: standard is recommended by the CSS3 standard. Testing a specific use on a page will never be superfluous: some browsers or their versions may simply not notice this or that pseudo-element.
General Terms of Use
By placing, for example, a div element with the description class = 'scElement' and the content "Element" on the page, indicating the CSS description in the stylesheet:
.scElement {
POSITION ...;
z-index ...;
...
},
you can apply the pseudo-class ": hover" and the pseudo-element ":: before" CSS to it:
.scElement: hover :: before {content: 'prefix'; color ...; background-color ...;}.
Then, when you hover over the word 'Element', the word 'prefix' will appear, in which the color of the letters and background will change.
Pseudo-element content options
If you do not specify properties in the pseudo-element, they will remain the same as the main element - scElement. You can specify a url, and then the content: url property ('/ scBox / rm-v / sc-rights.png') will show a picture on the element when you hover over it. In the case of content: "\ 03B1" the mathematical symbol "alfa " will appear , but use special characters: "& nbsp;", "& lt;", "& laquo;", "& raquo;" and others should not - they will be displayed as is.
There are many options for indicating the content of pseudo-elements: plain text, url (), a sequence of hexadecimal characters, notation: open-quote / close-quote or no-open-quote / no-close-quote, etc. Since the absolute position of the content is allowed through the properties of styles, then, applying before, CSS will allow you to place the pseudo-element anywhere in the element to which it is attached.
You can combine the simultaneous use of before and after. Therefore, by using CSS before content characters, you can get various effects, and by combining various pseudo-classes and pseudo-elements, you can surprise the visitor without spending a single byte of JavaScript code.
Pseudo-Element Features
The symbol ":" is accepted for their designation, as well as for designating pseudo-classes, but in CSS3 it is customary to designate the difference between pseudo-elements as "::". Browsers that understand this perceive both designations. No spaces are allowed in the record, the line in which the pseudo-class and (or only) the pseudo-element is written is written together:
scElement: hover :: before {content: 'prefix'; ...}
scElement: active: after {content: 'suffix'; ...}
It’s important not to forget: CSS before works outside the site’s content. Styles are not related to page content. Pseudo-elements are no exception. They are not present in the DOM tree and it is undesirable to use them in significant sections of the site - they won’t get into the content.
The use of ":" and "::" is supported by mobile platforms and modern browsers, but it is often not superfluous to check the operation on older versions.
The content of the pseudo-element is not included in the content of the site. Search engines will not see him. How to use this fact depends on the specific situation, but the ability to use CSS before, like after, independently or in a complex, is interesting when content is url (). Direct use of the content of the pseudo-element as a link to the site will allow you to download a file from it, for example, a picture.
The ability to change the style files on the site (cascading style sheet files is no exception) does not interfere with the formation and use of pseudo-elements as convenient at a particular point in time, in the right place of the algorithm, depending on the visitor's actions.