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

Question

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

Asked 5 years, 9 months ago

Viewed 122 times

1

Hello, I’m studying CSS3 and, in a given tutorial, I analyzed it all, and did not understand the point where the ::before was used together with the checkbox, in which the property was added content.

Why in the first use of ::before with the pseudo-class :checked it stylizes the value of content and does not style the checkbox itself?

Follows code:

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>

You want to know why on elemento::before need to put the content and in the elemento in itself not? If that is so, it is because the content of the element itself is defined in HTML, but the tag input is a little different

– Costamilam

2018/09/30 at 04:12
No, Guilherme, look at the second paragraph of my question: why does CSS style the content of the element (the content) and not the element itself, understand? See all the css code posted (with scrool), ok?

– Fernandes

2018/09/30 at 14:14

1 answer

Browser other questions tagged css3 pseudo-elements

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-09-30T14:18:13+00:00

Fernandes if I understand you well you want to know why he used the content correct?

Let’s explain.

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elementos

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:before

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

But this behavior of input types (checkbox, radio, text, numeber, email, etc...) is not standard, and are not all inputs that may receive a pseudo-element ::after and ::before as you can see in this question: Pseudo elements ::after and ::before work on which input types

Note that in HTML we only have the tag <input type="checkbox"> which corresponds to the gray background of the switch-buttom already the toggle which is the ball that goes from side to side she "doesn’t exist" in HTML, she is built with the pseudo-element

And why you need to put the content:"" in the pseudo elements?

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

https://developer.mozilla.org/en-US/docs/Web/CSS/content

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

This article can help you better understand the subject: https://tableless.com.br/geracao-estatica-de-conteudo-via-css/

A short direct explanation in 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;
}