CSS, SCSS

Question 1

Pseudo-element that is the first/last child of the selected element. It is often used to <b>add cosmetic content</b> to an element.

Answer 1

::before, ::after

example:

a::after {
content: “→”;
}

Question 2

what is overflow and what are the kinds

Answer 2

The overflow shorthand CSS property sets what to do when an element’s content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y.

/* Keyword values */

overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

Question 3

Placing span at a specific position in div

Answer 3

Span is not a block level element, so you can’t position it relative to another element.

Make it a div with style
position:absolute;

then, for example:
right:0;
bottom:0;
text-align:right’

Make sure that the containing div has style=”position:relative;” to contain the absolute object.

Question 4

What is aria-hidden=”true”?

Answer 4

Adding aria-hidden=”true” to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding:

purely decorative content, such as icons or images
duplicated content, such as repeated text
offscreen or collapsed content, such as menus

Question 5

What is a white-space CSS property and what are the kinds?

Answer 5

The white-space CSS property sets how white space inside an element is handled.

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

Question 6

How to change cursor?

Answer 6

cursor: pointer;
cursor: auto;

Question 7

How to detect a touch device with only CSS?

Answer 7

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Question 8

How to hide something behind the right screen edge?

Answer 8

#Sidebar {
    position: fixed;
    width: 30%;
    height: 100%;
    top: 0;
    right: 0;
    transform: translateX(100%);
    border: 1px solid red;
    transition: transform 5s; /* This is slow for demonstration purposes */
}

#Sidebar.open {
    transform: translateX(0);
}

Question 9

How to flip text vertically?

Answer 9

transform: rotate(270deg);

transform-origin: right bottom 0;

Question 10

How to align icon <i>?</i>

Answer 10

top: 5px;
left: 5px;

Question 11

How to make a dot in css?

Answer 11

<span></span>

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

Question 12

underline below span?

Answer 12

border-bottom: 2px solid $blue;