The target of CSS selectors with pseudo-element :: before

Question

The target of CSS selectors with pseudo-element :: before

Navigation

#1 by (1 votes)

1

Hello, I'm studying CSS3, and in a given tutorial, I looked at all of it, and I did not understand the point where ::before was used along with the checkbox, in which the content property was added.

Follow the code below:

body {
  margin: 5px;
  padding: 0;
  background: #262626;
}

#botoes {
  position: absolute;
  width: 100px;
  color: #fff;
  margin: 5px;
}

#botoes input[type=checkbox]::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #000;
  transition: .1s;
  transform: scale(1.1);
  box-shadow: 0 0px 15px #ffffff;
}

#botoes input[type=checkbox] {
  position: relative;
  background: #b9b9c8;
  width: 80px;
  height: 40px;
  border: none;
  float: right;
  border-radius: 20px;
  -webkit-appearance: none;
  margin-bottom: 15%;
  outline: none;
}

#botoes input:checked[type=checkbox]::before {
  left: 40px;
}

#botoes input:checked[type=checkbox] {
  background: dodgerBlue;
}

<html lang="pt-br">

<head>
  <title>Test Toogle With Pure CSS</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="CSS/xxxxxxxx.css">
</head>
<div class="box" id="box">
</div>

<body>
  <div id="botoes">
    Hidden Rings
    <input type="checkbox"> Collision Rings
    <input type="checkbox">
  </div>
</body>

</html>

css3 pseudo-elementos

asked by anonymous 30.09.2018 / 05:37

1 answer

Batch File to access multiple directories and execute python script in different command prompts NHibernate QuerySyntaxException

score 1 · Accepted Answer

Fernandes If I got it right you want to know why he used content correct?

Let the explanations.

A CSS pseudo-element is a keyword added to a selector that allows you to stylise a specific part of the element selected.

link

::before creates a pseudo-element which is the first child of element reached. It is often used to add content decorative to an element using the content property. This one element is inline by default.

link

See in this image that when HTML and CSS are rendered on the page the pseudo-element is created within input , which in turn gains a closing tag added by the browser itself. As you can see in the image.

Butthisbehavioroftheinputtypes(checkbox,radio,text,numeber,email,etc...)isnotstandard,andnotallinputscanreceiveapseudo-element::afterand::beforeasyoucanseeinthisquestion: pseudo elements :: after and :: before work on which input types

Notice that in HTML we only have the <input type="checkbox"> tag that corresponds to the gray background of the switch-buttom and the toggle which is the ball going from one side to the other it "does not exist" in HTML, it is built with the pseudo-element

Andwhydoyouneedtoputcontent:"" in pseudo elements?

The CSS property content is used with the pseudo elements ::before e ::after to generate content in an element. Objects inserted using the property content are anonymous elements replaced.

link

"In CSS there is the possibility of inserting an element of lie (pseudo-element) into objects in HTML. These elements can help you at various points in development, preventing the creation of empty HTML elements to produce some layout detail that can blend with the actual content ... The cool thing is that you can format CSS elements :: after and :: before as if they were elements of HTML, using the normal properties we already use daily. "

This article may help you better understand the subject: link

A small direct explanation of the code:

/* cor do btn sem estar checado "cinza" */
#botoes input[type=checkbox] {
  background: #b9b9c8;
}
/* cor do btn quando está checado "azul" */
#botoes input:checked[type=checkbox] {
  background: dodgerBlue;
}

/* quando vc declara um pseudo-elemento vc precisa declarar que ele tem um "conteúdo" (content) */
/* esse "conteúdo" antes de ser checado esta com left 0 */
#botoes input[type=checkbox]::before {
  content: '';
  left: 0;
}

/* depois de checado o "conteúdo" afasta 40px pra direita */
/* nesse momento vc não precisa declarar novamente o content, pois independe do input está checado ou não  o contente já foi declarado no ::before anteriormente */
#botoes input:checked[type=checkbox]::before {
  left: 40px;
}