how to get the same line through different <p> Tags

user_19725330 0
Viewed 64

am trying to use this css property "text-decoration: line-through;" on two different

Tags and without breaking the line

.pricereview {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.price {
  display: flex;
  align-items: end;
  text-decoration: line-through;
}

.prixunit {
  color: lightgrey;
  font-size: 20px;
  line-height: 20px;
}

.tnd {
  color: lightgrey;
  font-size: 13px;
  line-height: 26px;
  padding-left: 5px;
}
<div class="pricereview">
  <div class="price">
    <p class="prixunit">560</p>
    <p class="tnd">TND</p>
  </div>
</div>

This is the result that I want: Screenshot here

paragraph reactjs css html
2 Answers

I'd suggest using <span> tags and wrapping them in another element. Use a pseudo-element on the wrapper to make your "linebreak" span multiple elements of different font sizes and line heights without breaking.

.price {
  position: relative;
  display: inline-block;
}

.price::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  border-bottom: solid 1px #000;
}

.prixunit {
  font-size: 20px;
  line-height: 20px;
}

.tnd {
  font-size: 13px;
  line-height: 26px;
  padding-left: 5px;
}
<p class="price">
  <span class="prixunit">560</span>
  <span class="tnd">TND</span>
</p>

user_36141140

You cant do that with a p tag, cause its a block-level element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

And it seems that in your case you want to make a line that is not cutting exactly in the middle of the word. If its your case, text-decoration: line-through dont will help you.

user_97773090
Related