Css all after first

CSS Pseudo Elements Ultimate Guide

You can technically create any CSS design without the use of pseudo elements, but doing so is much harder and leaves you with messy code. Pseudo elements are amazing since they allow you to add/modify the HTML code of your site from CSS which means your HTML can stay clean and the CSS can add the extra content it needs. This may seem really confusing but it will all make sense once we talk about the first type of pseudo element.

If you prefer to learn visually, check out the video version of this article.

What Are Pseudo Elements?

I briefly mentioned that pseudo elements are ways for you to add/modify your HTML from CSS, but it is actually a bit more than that. There are really two styles of pseudo elements.

The first and by far most popular type are pseudo elements that allow you to add content to your HTML from CSS. There are only two of these pseudo elements (before and after) and we will be spending most of the time in this article on these pseudo elements.

The other style of pseudo elements allow you to treat specific sections of your HTML as if they were their own element. Good examples of this are the first-letter and first-line pseudo element that allow you to style the first letter or line of text as if it was its own element. Another example is the selection pseudo element that allows you to style the text that is highlighted. Try highlighting any text in this paragraph and you will see this selector in effect. Below is the CSS I used for this effect.

.class::selection  background-color: red; color: white; >

You will notice that the selection pseudo element has two colons before it. This is how you define every single pseudo element. You put two colons at the start of the pseudo element and then put the pseudo element itself.

Before/After Pseudo Elements

In order to add content to your HTML you need to use the before and after pseudo elements. These pseudo elements allow you to add one child element as the first and/or last child element of whatever element you are selecting in your CSS.

.class-name::before  /* This is the first child of .class-name */ > .class-name::after  /* This is the last child of .class-name */ >

In the above code we are adding two new elements to the page. The before element is the first child and the after element is the last child. You will notice if this is all you do, though, nothing actually changes in your HTML. This is because the before/after pseudo elements require the content property to be set to a value in order to show up on the page. This content property defines what is put inside the new child element.

div class="class-name"> span>First Childspan> span>Second Childspan> div>

For the next example assume we start with the above HTML and then apply the below CSS.

.class-name::before  content: "New First Child"; > .class-name::after  content: ""; >

div class="class-name"> span>New First Childspan> span>First Childspan> span>Second Childspan> span>span> div>

You can now see that even though our original HTML only had 2 children our actual HTML that the browser sees has 4 children. Two of the children come from the HTML and the other 2 come from the CSS. If you inspect your page using the browser dev tools it will probably look something like the below example. I just wrote out what the actual HTML would look like in terms of how the browser actually renders the content.

div class="class-name">  ::before span>First Childspan> span>Second Childspan>  ::after div>

You will also notice in our CSS that the content property for the after element is an empty string. This is very common to do and just means we don’t want to show any content in that element since we will instead do our own styling. This is useful when you want to create shapes with CSS like the triangle that shows up at the bottom of a tooltip.

Why Use Before/After Pseudo Elements

It may seem like these elements are useless, but they are really useful when you want to add specific content to specific HTML elements without repeating that content in your HTML.

For example, you can create the below button with a tooltip by using a single HTML element and having the CSS take care of all the tooltip code.

button data-tooltip="Hovered">Hover Mebutton>

[data-tooltip]  position: relative; > [data-tooltip]::before  content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 0.25rem); transform: translateX(-50%); background-color: blue; padding: 0.25rem 0.5rem; >

If you want to learn more about the attr function used in this example check out my data-attributes CSS article.

If I didn’t use pseudo elements in the above example then I would need to create a separate HTML element in my HTML that is just for the tooltip and that can get really messy and is prone to errors. This is why pseudo elements are much better.

Other Pseudo Elements

As I mentioned at the beginning of this article there are 2 styles of pseudo elements and while the before/after elements are the most common pseudo elements you will use there are still other useful elements you can use.

::first-letter

The first-letter pseudo element selects the first letter inside a p tag. You can actually see it in action at the start of this paragraph. This is great for adding special styling to your first letter like some books do for the first letter in a chapter. One thing to note is that only some CSS properties can be used when styling the first-letter. For example you cannot change things like the display or position properties, but you can change things like padding or color.

.class-name::first-letter  font-size: 2em; color: red; font-weight: bold; >

::first-line

Similar to the first-letter pseudo element, the first-line pseudo element lets you change the style of just the first line of content in any block level element. This pseudo element is even more restricted on which CSS properties you can use. You cannot use things like margin or padding, but you can change pretty much anything to do with color or font.

.class-name::first-line  color: red; >

::selection

We have already covered this pseudo element, but essentially it lets you style the highlighted content on a page. Again you can only use certain CSS properties. Pretty much only properties that modify the color or text-decoration are allowed. You can highlight this paragraph for an example.

.class::selection  background-color: red; color: white; >

Conclusion

Pseudo elements are great for cleaning up your HTML while still having advanced CSS designs. The before and after pseudo elements will be the ones you use the most, but there are many other pseudo elements, even beyond the ones covered in this article, that will make doing specific things much easier.

Источник

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all

elements:

Example

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Notice the double colon notation — ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all

elements:

Example

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if «float» is «none»)
• text-transform
• line-height
• float
• clear

Pseudo-elements and HTML Classes

Pseudo-elements can be combined with HTML classes:

Example

The example above will display the first letter of paragraphs with in red and in a larger size.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example

p::first-letter <
color: #ff0000;
font-size: xx-large;
>

p::first-line color: #0000ff;
font-variant: small-caps;
>

CSS — The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each element:

Example

CSS — The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each element:

Example

CSS — The ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list items.

The following example styles the markers of list items:

Example

CSS — The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to ::selection : color , background , cursor , and outline .

The following example makes the selected text red on a yellow background:

Example

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert something after the content of each element
::before	p::before	Insert something before the content of each element
::first-letter	p::first-letter	Selects the first letter of each element
::first-line	p::first-line	Selects the first line of each element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no «required» attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a «readonly» attribute specified
:read-write	input:read-write	Selects elements with no «readonly» attribute
:required	input:required	Selects elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

Источник