htmlcsstext-decorations

text-underline decoration not apply on all child element

I have a label "Show more", that display hidden content. I want all child element of this label to be underline including the arrow. The problem is that only the text has text-decoration and not the arrow. How can I solve this issue in order that also arrow will be in the same underline text.

Thanks

#arrow_create {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}

.icos-angle-up {
  margin-left: 3px !important;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.icos-angle-down {
  margin: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.icos-angle-up {
  visibility: hidden;
}

#read_more_checkbox:checked+label[for="read_more_checkbox"]>.icos-angle-up {
  visibility: visible;
}

#read_more_checkbox:checked+label[for="read_more_checkbox"]>.icos-angle-down {
  display: none;
}

.read_more_txt {
  display: none;
}

#read_more_checkbox {
  display: none;
}

#read_more_checkbox:checked~.read_more_txt {
  display: block;
  margin-top: 10px;
}

.read_more_label {
  margin-left: 5px !important;
  font-weight: bold;
  text-transform: uppercase;
}

#read_more_checkbox~.read_more_label:before {
  content: attr(read_more);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  width: 110px;
}

#read_more_checkbox:checked~.read_more_label::before {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  content: attr(read_less);
  cursor: pointer;
}
<label for="read_more_checkbox" class="read_more_label" read_more="Show more" read_less="Show less">
    <span id="arrow_create" class="icos-angle-down"></span>
    <span id="arrow_create" class="icos-angle-up"></span>               
    </label>

What I have now

What I want

Solution

  • So instead of using text-decoration (which only applies to text) you can either use border-bottom or to keep it more complicated there is also the possibility of using a css pseudo class.

    Using border bottom

    .read_more_label {
  border-bottom: 1px solid black;
}

#arrow_create {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}

.icos-angle-down {
  margin: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
    <label class="read_more_label">
  Show more
  <span id="arrow_create" class="icos-angle-down"></span>           
</label>

    Using css pseudo classes

    The benefit of using pseudo classes would be that you also have the chance to design it more and you can even add some litte animations (as I did in the example)

    .read_more_label {
  position: relative;
}

.read_more_label::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
  opacity: 0;
  transition: all 0.2s;
}

.read_more_label:hover::after {
  opacity: 1;
}

#arrow_create {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}

.icos-angle-down {
  margin: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
    <p>HOVER IT: </p>

<label class="read_more_label">
  Show more
  <span id="arrow_create" class="icos-angle-down"></span>           
</label>