Day 2: 100 days of code, The Before And After Pseudo Elements
Tags: 100daysofcode, css, webdev, programming
Published: 2021-08-15 04:50:22

## Pseudo Elements in CSS
Don't try to put pseudo elements on images, it will not work.   
The first point to keep in mind is that the before and the after pseudo-elements come before and after "the content" of the container for which they are defined, not before and after the "container".  

![Showing the position of the before and after pseudo elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oqknhx09vucj8s8m3ov.png)

{% codepen https://codepen.io/grvskwt/pen/poPBEjv %}

In the below example, the content is not empty.

{% codepen https://codepen.io/grvskwt/pen/ExmJggm %}

These are mainly used for design elements, so that we don't have to define two extra divs.

### Diving deep into the content property of the before and after pseudo elements. 

{% codepen https://codepen.io/grvskwt/pen/VwbNzYy %}


### CSS before and after pseudo elements as design elements. 
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.


{% codepen https://codepen.io/grvskwt/pen/abWxVZo %}


## CSS transition property
Sources:-
[css-tricks](https://css-tricks.com/almanac/properties/t/transition/)
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#simple_example)  
Summary:-
`transition` is a short hand for 4 different transition properties, which are (in order) `transition-property` `transition-duration` `transition-timing-function` `transition-delay` .

* `transition-property` :- This defines that on the change of which property should we apply a transition. Some examples are: background-color, font-size, transform etc. We can also specity `all` as the value of this property, indicating that if any of the property of this element changes, apply the transition.

{% codepen https://codepen.io/grvskwt/pen/QWvPvbG %}

* `transition-timing-function` :- Values can be:- ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end.  

`steps(4,start)` :- This means the transition will have 4 steps, and it will start at the instant you hover on the element.  
`steps(4,end)`:- Transition will have 4 steps, and it will start after the end of the first time interval(which we calculated by regularly dividing total duration of transition with the number of steps). Don't go into little details in this as it is hardly used. 

{% codepen https://codepen.io/grvskwt/pen/VwbNbpJ %}

Multiple animated properites example: - 
{% codepen https://codepen.io/grvskwt/pen/OJmGmZb %}


## Few short points that I came to know about
1. to prevent a text from moving to the next line, you can use `white-space:nowrap` for that text block.

2. The focus pseudo class:- Used for styling an element that is currently targeted by the keyboard(through tabbing), or activated by the mouse.   
{% codepen https://codepen.io/grvskwt/pen/KKmYmZy %}

3. If you want to center an image inside a div, use:-
```
img{
display:block;
margin:auto;
```
as the default value of display for an img element is inline, we must set it to block for margin auto to work for centering. 


4. Remember that the `ul` and `ol` have some margin/padding by default. So, whenever you are making a navigation bar or something, make sure to remove that margin/padding. To see the default styling of various html elements, visit this [link](https://www.w3schools.com/cssref/css_default_values.asp)

5. `[attribute^=value]` Example:-  `a[href^="https"]` Selects every <a> element whose href attribute value begins with "https".

6. `[attribute$=value]` Example: - `a[href$=".pdf"]` Selects every <a> element whose href attribute value ends with ".pdf"