This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat
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 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 specityallas 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
to prevent a text from moving to the next line, you can use
white-space:nowrapfor that text block.The focus pseudo class:- Used for styling an element that is currently targeted by the keyboard(through tabbing), or activated by the mouse.
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.
- Remember that the
ulandolhave 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.
This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat
Gaurav-Shekhawat | Sciencx (2021-08-15T04:50:22+00:00) Day 2: 100 days of code. Retrieved from https://www.scien.cx/2021/08/15/day-2-100-days-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.