text-underline decoration not apply on all child element

Question

text-underline decoration not apply on all child element

739 Views Asked by Rony Cohen At 12 July 2022 at 09:14

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

Original Q&A

There are 3 best solutions below

raja Abdullah On 12 July 2022 at 09:18

You can use hr tag to draw a line under any thing and then you can add css on hr according to your need.for example if you want to change color of that line you can simply add css on hr tag and change color.

K.Nikita On 12 July 2022 at 20:33

If shape arrow doesn't matter.

span {
    text-decoration: underline;
}

<html>
  <body>
    <span>SHOW MORE &#8744;</span>
  </body>
</html>

You can use also other HTML Special Characters

Another way

span {
  border-bottom: 1px solid black;
}

span::after {
  content: "";
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  margin: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<html>
  <body>
    <span>SHOW MORE</span>  
  </body>
</html>

**Athii** · Accepted Answer · 2022-07-12T21:13:41.770000

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>

text-underline decoration not apply on all child element

There are 3 best solutions below

Using border bottom

Using css pseudo classes

Related Questions in HTML

Related Questions in CSS

Related Questions in TEXT-DECORATIONS

Trending Questions

Popular # Hahtags

Popular Questions