We are going to know the pseudo elements in CSS, cascading style sheets, which are used, among other things, to define styles for the first line or letter of a text.
The pseudo-element (pseudo-elements, if we prefer the Spanish translation) are used to apply styles to more specific parts within a label. That is, for the specific example of the paragraph label, with the pseudo elements we can define the style for the first letter of the paragraph and for the first line. That is, with CSS we can define the style of a label, but with the pseudo-elements we do not limit ourselves to defining the style for the entire content of that label, but we indicate the style for a restricted part of that label.
There are various types of pseudo elements, with different applications, to define the style of various things, as we will see below with examples.
Pseudo-element first-letter
A common effect of some publications, for example those of children’s stories, is to make the first letter of a page bigger and decorate it in some way. With CSS we can apply specific styles and make, for example, that first letter bigger and have a different color from the rest of the paragraph.
It is used in this way:
Q: first-letter { font-size: 200%; colour: #993333; font-weight: bold; }
Thus we are assigning a font size 200% larger than that of the paragraph. We’re also changing the color of that first letter.
Among all the style properties, only a few can be applied to first-letter pseudo-elements. They are as follows, according to the W3C specification: font properties, color properties, background properties, ‘text-decoration’, ‘vertical-align’ (only if ‘float’ is set to ‘none’), ‘text-transform’, ‘line-height’, margin properties, padding properties, border properties, ‘float’, ‘text-shadow’ and ‘clear’ .
You can see a
Pseudo-element first-line
As I mentioned earlier, this pseudo-element is used to assign its own style to the first line of the text. It is possible that we have seen a magazine or newspaper that uses this style to emphasize the first lines of the paragraph. An example of its use would be the following:
P:first-line { text-decoration: underline; font-weight: bold; }
The style properties that can be applied to the first-line pseudo-element are: font properties, color properties, background properties, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align ‘, ‘text-transform’, ‘line-height’, ‘text-shadow’ and ‘clear’.
You can see a
Using classes with pseudo-elements
On certain occasions we may need to create a CSS class to which to assign the pseudo-elements, so that they do not apply to all tags on the page. For example, we may want the style of the first line of text to be modified only in some paragraphs and not in all of the page.
A class is defined by the name of the tag followed by a period and the name of the class. If we also want to define a pseudo-element, we should indicate it below, with this syntax:
P.classname:first-line { font-weight: bold; }
Pseudo-elements in CSS2
Apart from first-line and first-letter, there are other pseudo-elements in the CSS 2 specifications that I’m going to name for the readers’ knowledge, although I’ll go deeper into their use. They are before and after and are used to insert “generated content” before and after the element to which we assign these pseudo-element.
An example of this is:
P.note:before { content: “Note: ” }
Thus, a class of paragraph called “note” has been defined in which it is indicated that the indicated text should be included before the note itself, that is, “Note: “.
Note: Attention to the compatibility with CSS2, which, at least for these elements, is not supported in versions 6 of Internet Explorer. Firefox, on the other hand, does support these CSS2 features.
If we want to see a complete example of using the after and before pseudo elements, we can read the following CSS workshop article, in which we show a .
Facebook Comments
Disqus