Day 2: 100 days of code, The Before And After Pseudo Elements

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".

In the below example, the content is not empty.

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.

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.

CSS transition property

Sources:-
css-tricks
MDN

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.

• 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.

Multiple animated properites example: -

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.
   
   

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.

1. 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

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

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

Comments

[Gaurav-Shekhawat]

In case you weren't aware, an <input> doesn't allow ::before or ::after pseudo elements. None of the different input types do. Why can't you use these pseudo elements on inputs? Because these pseudo elements are only allowed to be used on container elements.

[Gaurav-Shekhawat]

Wasted 20 minutes today on applying pseudo elements on images. Then saw the first line of this article...