Remove extra height when pseudo element changes its content-CodePudding

I'm customizing the style of a checkbox. Where is this extra height coming from when the pseudo element changes its content?

See example

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form-control.checkbox input[type=checkbox] {
  display: none;
}
.form-control.checkbox input[type=checkbox]   label::before {
  content: "";
  border: 1px solid blue;
  height: 1.25em;
  width: 1.25em;
  display: inline-block;
  margin-right: 0.5em;
}
.form-control.checkbox input[type=checkbox]:checked   label::before {
  content: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" stroke="#fff" stroke-width="2"><polyline class="st0" points="3,10 7.3,14 16,4 "/></svg>');
  background-color: red;
}

<div class="form-control checkbox">
    <input type="checkbox" id="chk-standard">
    <label for="chk-standard">Unchecked</label>
</div>
<div class="form-control checkbox">
    <input type="checkbox" id="chk-standard-checked" checked>
    <label for="chk-standard-checked">Checked</label>
</div>

CodePudding user response：

The change in height seems to occur because of the border setting.

If this is removed then no change takes place. I cannot explain this, and removing the box-sizing does not help which is odd.

However, if you need a quick fix then put the tick content into the label::before even when the input isn't checked. The two versions of the pseudo element then have the same dimensions and no 'jump' of the text takes place.

Of course this only works because the tick and the unchecked background are the same (white in this case).

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form-control.checkbox input[type=checkbox] {
  display: none;
}

.form-control.checkbox input[type=checkbox] label::before {
  content: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" stroke="#fff" stroke-width="2"><polyline class="st0" points="3,10 7.3,14 16,4 "/></svg>');
  border: 1px solid blue;
  height: 1.25em !important;
  width: 1.25em !important;
  display: inline-block;
  margin-right: 0.5em;
}

.form-control.checkbox input[type=checkbox]:checked label::before {
  background-color: red;
}

<div class="form-control checkbox">
  <input type="checkbox" id="chk-standard">
  <label for="chk-standard">Unchecked</label>
</div>
<div class="form-control checkbox">
  <input type="checkbox" id="chk-standard-checked" checked>
  <label for="chk-standard-checked">Checked</label>
</div>

CodePudding user response：

You can reset line-height of form-control and vertical-align of the pseudo, so it has room to be layed, with and wihout content, without jumping on the baseline nor increasing the default line-height.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.form-control {
line-height:1.5em;
}
.form-control.checkbox input[type=checkbox] {
  display: none;
}
.form-control.checkbox input[type=checkbox]   label::before {
  content: "";
  border: 1px solid blue;
  height: 1.25em;
  width: 1.25em;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align:top;
}
.form-control.checkbox input[type=checkbox]:checked   label::before {
  content: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" stroke="#fff" stroke-width="2"><polyline class="st0" points="3,10 7.3,14 16,4 "/></svg>');
  background-color: red;
}

<div class="form-control checkbox">
    <input type="checkbox" id="chk-standard">
    <label for="chk-standard">Unchecked</label>
</div>
<div class="form-control checkbox">
    <input type="checkbox" id="chk-standard-checked" checked>
    <label for="chk-standard-checked">Checked</label>
</div>

CodePudding user response：

Your pseudo element has an inline-block. Additional height comes from the lines. There you can see that the symbol in the form of svg (which has a lower height) changes through the content, and the height has changed for all the content in which it is located. Install:

.form-control.checkbox input[type=checkbox]   label::before { vertical-align: middle; }

That is, the letter is in some invisible container, which is regulated by the line-height property, and the letter itself does not change. There is a detailed answer about this on habr: https://habr.com/ru/company/pt/blog/337450/