How to underline two div's consecutively?-CodePudding

I've got 2 <div>s that each gather their text from some JS that I've written. But I want the end-result to look like in the following image. And I can't figure out how to do that.

I can consolidate them into a single but then I have the issue of needing to apply two different weights to a single <div>, which also wracks my brain.

So basically I want text with 2 different font-weights to be underlined with no interruption.

I've tried the following, and a lot of googling:

div.parentDiv {
    text-decoration-line : underline;
}

Desired result

CodePudding user response：

Is this what you are after?

div {
  font-weight: 700;
  text-decoration: underline;
}

div span {
  font-weight: 400;
}

<div>
  Good Reviews
  <span>(30)</span>
</div>

Its hard to know with your current question, could you add your HTML and JS so we can see the whole example.

CodePudding user response：

I guess you wanted to both the div text to be underlined.

body {
  font-family: sans-serif;
  background: #dedede;
  padding: 48px;
}

.parent {
  display: flex;
  flex-direction: row;
  text-decoration: underline;
  font-weight: 600;
}

.child1 {
  color: red;
}
.child2 {
  color: green;
}

                <div >
                        <div >Good Reviews</div>
                        <div >(30)</div>
                </div>

However to achieve the result you want you can use  .

body {
  font-family: sans-serif;
  background: #dedede;
  padding: 48px;
}

.child1 {
  text-decoration: underline;
}

                <div>
                        <span >Good Reviews&nbsp;&nbsp;&nbsp;(30)</span>
                </div>

CodePudding user response：

It can be done by making the underline apply to both the .parentDiv and to its child <div>s, as in this example:

div.parentDiv,
div.parentDiv>div {
  text-decoration-line: underline;
}

div.div1 {
  display: inline-block;
  font-weight: bold;
}

div.div2 {
  display: inline-block;
}

<div >
  <div >
    Good reviews
  </div>
  <div >
    (30)
  </div>
</div>

Note that in some browsers the underline may not cross through the bottom of the parenthesis the way it does in your example image. If you absolutely need that, then that can't easily be achieved using regular text formatting CSS; you'd need to add extra elements (or pseudo-elements) with custom border formatting.

CodePudding user response：

To style the two parts individually you need to have at least one of them in its own element.

This snippet wraps the parts in spans and puts the underline under the whole containing element.

Note that to get a continuous underline like in the image given in the question you need to set underline position as well, otherwise, in some browsers, there will be a break in the line when it comes across a descender (in this case the brackets).

If you need the line to cut across the descenders in all browsers you will need to abandon underline and paint in the line using linear-gradient background on the containing div.

div {
  text-decoration: underline;
  text-underline-position: under;
}

span:nth-child(1) {
  font-weight: bold;
}

<div><span>Good Reviews</span><span>(30)</span></div>