Learning about pseudo-elements :Before and :After_html/css_WEB-ITnose

The main purpose of Cascading Style Sheets (CSS) is to add styles to HTML elements. However, in some cases adding additional elements to the document is redundant or impossible. In fact, there is a feature in CSS that allows us to add additional elements without disturbing the document itself, which are "pseudo-elements".

You must have heard of this term, especially if you have been following our tutorials. Click here to browse other articles by the original author

In fact, there are indeed some members of the CSS family (CSS selectors) that are classified as pseudo-elements such as: :first-line, :first-letter, ::selection, :before and :after. However, for the purposes of this article, we will limit our discussion to the :before and :after elements. Therefore, "pseudo-elements" in this article will refer specifically to these two pseudo-elements (:before and :after), and we'll start with the basics to examine this unique topic.

About syntax and browser support

Pseudo elements actually exist in CSS1, but the :before and :after we are discussing now were released in CSS2.1. Initially, the syntax for pseudo-elements was ":" (one colon). With the development of the web, the revised pseudo-element in CSS3 used "::" (two colons), that is::before and :: after? to distinguish pseudo-elements and pseudo-classes (such as :hover, :active, etc.)

However, whether you use a single colon or a double colon, the browser will recognize them. Since IE8 only supports the single-colon format, for safety reasons, if you want wider browser compatibility, then use the single-colon format!

What it does

In short, pseudo-elements will insert additional elements before and after the content element, so when we add them, use the following markup, they Technically equal.

:before   This the main content. :after

:before

This the main content.

:after /tr>

But these elements are not actually generated in the document. They will be visible externally, but you won't find them in the document's source code, so in effect they are "fake" elements.

Using pseudo-elements

Using pseudo-elements is relatively easy, :before will "add" an element before the content and :after will "add" an element after the content. To add content among them we can use the content attribute.

For example, the following code snippet will add a quote before and after the quote.

blockquote:before {   content : open-quote ; blockquote:after {   content : close-quote ;

blockquote:before { content : open-quote ; blockquote:after { content : close-quote ;

Pseudo-element styles

Despite being "fake" elements, pseudo-elements actually behave like "real" elements and we can add any style to them, such as Change their color, add background color, adjust font size, adjust the text within them, and more.

blockquote:before {   content : open-quote ;   font-size : 24pt ;   text-align : center ;   line-height : 42px ;   color : #fff ;   background : #ddd ;   float : left ;   position : relative ;   top : 30px ; blockquote:after {   content : close-quote ;   font-size : 24pt ;   text-align : center ;   line-height : 42px ;   color : #fff ;   background : #ddd ;   float : right ;   position : relative ;   bottom : 40px ;

blockquote:before {

content : open -quote;

font-size: 24pt;

text-align: center; line-height: 42px;

color: #fff;

background : #ddd ;

blockquote:before {   content : open-quote ;   font-size : 24pt ;   text-align : center ;   line-height : 42px ;   color : #fff ;   background : #ddd ;   float : left ;   position : relative ;   top : 30px ;   border-radius: 25px ;   height : 25px ;   width : 25px ; blockquote:after {   content : close-quote ;   font-size : 24pt ;   text-align : center ;   line-height : 42px ;   color : #fff ;   background : #ddd ;   float : right ;   position : relative ;   bottom : 40px ;   border-radius: 25px ;   height : 25px ;   width : 25px ;

float : left ; position : relative ; top : 30px ; blockquote:after { content : close-quote ; font-size : 24pt ; text-align : center ; line-height : 42px ; color : #fff ; background : #ddd ; float : right ; position : relative ; bottom : 40px ;

Specify pseudo-element size The default generated element is an inline element, so when If we want to specify their height and width, we first have to declare them as block-level elements using display: block. 　Since float has been set, there is no need to set display:black.

blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff ; background : #ddd ; float : left ; position : relative ; top : 30px ; border-radius: 25px; height: 25px; width: 25px; > font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background : #ddd ; float : right ; position : relative ; bottom : 40px ; border-radius: 25px ; height : 25px ; width : 25px ;

Associated background image

We can also replace the content with an image instead of just plain text. Although the content attribute provides url() to insert images, in more cases, I prefer to use the background attribute to have better control over the image.

blockquote:before {   content : " " ;   font-size : 24pt ;   text-align : center ;   line-height : 42px ;   color : #fff ;   float : left ;   position : relative ;   top : 30px ;   border-radius: 25px ;   background : url (images/quotationmark.png) -3px -3px #ddd ;   display : block ;   height : 25px ;   width : 25px ; blockquote:after {   content : " " ;   font-size : 24pt ;   text-align : center ;   line-height : 42px ;   color : #fff ;   float : right ;   position : relative ;   bottom : 40px ;   border-radius: 25px ;   background : url (images/quotationmark.png) -1px -32px #ddd ;   display : block ;   height : 25px ;   width : 25px ;

blockquote :before {

content : " " ;

font-size : 24pt;

text-align : center ;

line-height : 42px;

blockquote:hover:after, blockquote:hover:before {   background-color : #555 ;

color : #fff ; float : left ;

position : relative ;

top : 30px ;

border-radius : 25px;

transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;

background: url (images/quotationmark.png) -3px -3px #ddd; display: block; height: 25px; width : 25px ; blockquote:after { content : " " ; font-size : 24pt ; text-align : center ; line-height : 42px ; color : #fff ; float : right ; position : relative ; bottom : 40px ; border-radius: 25px ; background : url (images/quotationmark.png) -1px -32px #ddd ; display : block ; height : 25px ; width : 25px ;

However, as you As you can see from the code snippet above, we have still declared the content attribute and used an empty string at this time. The content attribute is required and should be used frequently. Otherwise, pseudo-elements won't work properly anyway. Combined with Pseudo-Classes Although there are different types of pseudo- Hopefully, when our mouse moves over blockqoute, the background color of the quotes will become slightly darker.

blockquote:hover:after, blockquote:hover:before { background-color : #555 ;

Add transition effect We even You can apply the transition attribute on pseudo-elements to create beautiful color transitions.

transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;

MORE INSPIRATION

To inspire you, we have chosen three cool examples that will give you lots of ideas on web design.

Captivating Shadows

In this tutorial Paul Underwood explains how to create more realistic and attractive shadow effects.

Use the pseudo-elements :before and :after . Both of them are absolutely positioned and use negative z-index to place them behind the image to achieve a shadow effect.

3D button

This is a very clever implementation, using pseudo elements combined with CSS3 box-shadow to draw an amazing 3D button, using only CSS and single anchor text. The pseudo element: before is used to add the number "1" to the left side of the button.

Overlay Image Effect

It is also possible to use pseudo-elements to create a "messy" overlay image effect using just an image tag. Pseudo elements are used to create the illusion of overlapping images by using a negative z-index value to make the "overlay" image behind the real image.

Conclusion

Pseudo elements are cool and practical. Basically, every element we add does not interfere with the existing ones. HTML structure, and pseudo-elements can do almost everything we can think of.

In fact, there are some improvements to pseudo-elements, which are currently being carried out gradually, such as nested pseudo-elements div::before::before { content: ”; } and multiple pseudo-elements div::before(3) { content: "; }. Obviously, in future web design, these improvements will give our designs more forms (more possibilities). However, they will be supported in the latest browsers, so let's wait patiently for now!

Original source: Thoriq Firdaus