Before CSS - original, convenient, practical

Pseudo-elements and CSS pseudo-classes: before, after, hover, active, etc. - an effective opportunity to qualitatively improve and simplify the execution of the site, not including in the code JavaScript-handlers for obvious, not requiring complex reaction design decisions, event elements, dialogues and visitor actions.

Pseudo-elements are convenient, multifunctional, have significant and multivariate properties for simple and complex author's ideas: how to attract attention in an original way, imperceptibly specify actions, deduce the necessary hint in the right place.

Large perspectives are opened when url () is specified in the contents of the pseudo-element. Indeed, this option opens new horizons, both in terms of downloading something to the site page, and in the possible activation of something somewhere

A 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 pages of the site, then trusting the content property is something meaningful to the search engine does not make sense.

The pseudo-element :: before CSS allows you to add content before the element, and :: after - after. The content can vary from simple text to complex formatting in terms of CSS properties, but not HTML tags. A pseudo-element can be absolutely positioned within the element to which it is attached, because the before and after sense is relative and mobile. You can not only specify the position, but also the sizes, colors, backgrounds, fonts and other CSS properties.

Like the CSS pseudo-classes, before and after are preceded by the ":" symbol, but according to the CSS3 standard, "::" is recommended. Testing a specific usage on the page will never be superfluous: some browsers or versions of them may simply not notice this or that pseudo-element.

General Terms of Use

Putting, for example, a div element with a description of class = 'scElement' and the content of 'Element' per page, specifying a CSS description in the style sheet:

.scElement {
POSITION ...;
Z-index ...;
...

},

You can apply to it the pseudo-class ": hover" and the pseudo-element ":: before" CSS:

.scElement: hover :: before {content: 'prefix'; Color ...; Background-color ...;}.

Then, when you hover your mouse over the word 'Element', the word 'prefix' will appear in which the color of the letters and the background will change.

Variants of pseudo-element content

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 ('/ scBox / rm-v / sc-rights.png') property will point to the picture on the element when you hover over it. In the case of content: "\ 03B1", the mathematical symbol "alfa " will appear , but use the special characters: "& nbsp;", "& lt;", "& laquo;", "& raquo;" And the others should not - they will be displayed as is.

There are many options for specifying the contents of pseudo-elements: plain text, url (), a sequence of hexadecimal symbols, the notation: open-quote / close-quote or no-open-quote / no-close-quote, etc. Since it is possible to specify an absolute content position Through style properties, then, applying before, CSS will allow placing the pseudo-element anywhere in the element to which it is attached.

You can combine simultaneous use of before and after. Therefore, placing symbols with CSS before content, you can get different effects, and by combining different pseudo-classes and pseudo-elements, surprise the visitor without spending a single byte of JavaScript code.

Features of pseudo-elements

For their designation, the symbol ":" is used, as well as for pseudo-classes, but in CSS3 the distinction of pseudo-elements is usually designated "::". Browsers, who understand this, perceive both signs. Spaces in the record are not allowed, the string in which the pseudo class and (or only) the pseudo-element is recorded, 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 content. Styles are not relevant to the content of the page. Pseudo-elements are not an exception. They are not present in the DOM tree and it is undesirable to use them in significant sections of the site - they will not be included in the content.

The use of ":" and "::" is supported by mobile platforms and modern browsers, but it is often not superfluous to check work on outdated versions.

The content of the pseudo-element is not included in the content of the site. It will not be seen by the search engines. How to use this circumstance depends on the specific situation, but the ability to use CSS before, as well as after, independently or in complex, is interesting when the content is a url (). Direct use of the contents 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 modify style files on the site (cascading style sheet files - not an exception) does not prevent the formation and use of pseudo-elements as convenient at a particular time, at the right place of the algorithm, depending on the actions of the visitor.