Kevin Powell - Community•7mo ago

How do I remove the text-decoration from the label::before

https://codepen.io/ananthuk7/pen/mdgXzRp How do I remove the text-decoration from the label::before when I check the checkbox? I need to add X for my custom check box when it is checked. Also, I can't change the elements. Is there any better solution?

Ananthu Krishnan

CodePen

mdgXzRp

...

7 Replies

Mannix•7mo ago

you use the other pseudo element to make that line-through effect 🙂

.customCheckbox:checked ~ .customLabel::after {
    content: '';
    position: absolute;
    right: 0;
    width: calc(100% - 32px);
    height: 1px;
    background: green;
}

.customCheckbox:checked ~ .customLabel::after {
    content: '';
    position: absolute;
    right: 0;
    width: calc(100% - 32px);
    height: 1px;
    background: green;
}

and add position: relative; to .customCheckbox:checked ~ .customLabel

theoriginalandrew•7mo ago

beat me to it... pretty close though it is a little larger than his container- i think this is what he's looking for (using your solution and the right height)

.customCheckbox:checked ~ .customLabel {
  position: relative;
  color: green;
  text-decoration: line-through;
}
.customCheckbox:checked ~ .customLabel::after {
  position: absolute;
  height: 22px;
  width: 22px;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  content: "M";
  color: #ffffff;
  background-color: green;
  text-decoration: none !important;
}

.customCheckbox:checked ~ .customLabel {
  position: relative;
  color: green;
  text-decoration: line-through;
}
.customCheckbox:checked ~ .customLabel::after {
  position: absolute;
  height: 22px;
  width: 22px;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  content: "M";
  color: #ffffff;
  background-color: green;
  text-decoration: none !important;
}

theoriginalandrew•7mo ago

changed from an "X" to an "M" to more clearly show that the text-decoration: none; actually is working, because the x makes it hard in codepen's font choice

theoriginalandrew•7mo ago

Mannix•7mo ago

very nice solution Andrew. 🙂 With mine you might wonder where did i get the 32px to subtract for the width. It's the width of the box + gap + border width.

theoriginalandrew•7mo ago

ah smart, i just went with his height/width above, but added 2px for the top/bottom and left/right 1px border hard to know what they want without getting responses :GoodMeme:

ananthukrish•7mo ago

this is what I'm looking for. Thank you.

Gaming

Programming

How do I remove the text-decoration from the label::before