Adding text next to first and last items in a vertical list in simple HTML CSS-CodePudding

I wanted to try doing a simple number scale going from 1 to 10. I know there's many ways to go about it and here's what I tried:

<div class="rate-container">
<p class="first">Extremely Unlikely</p>
  <a class="rate">1</a>
  <a class="rate">2</a>
  <a class="rate">3</a>
  <a class="rate">4</a>
  <a class="rate">5</a>
  <a class="rate">6</a>
  <a class="rate">7</a>
  <a class="rate">8</a>
  <a class="rate">9</a>
  <a class="rate">10</a>
<p class="first">Extremely Likely</p>
</div>

I am trying to have the text be exactly placed next to the number 1 and 10 items respectively. I did so with a table in the following fashion.

 <table>
        <tr>
            <td> <a class="rate">1</a> </td>
            <td>
                <p class="first">Extremely Unlikely</p>
            </td>
        </tr>
        <tr>
            <td><a class="rate">2</td>
        </tr>
        <tr>
            <td><a class="rate">3</td>
        </tr>
        <tr>
            <td><a class="rate">4</td>
        </tr>
        <tr>
            <td><a class="rate">5</td>
        </tr>
        <tr>
            <td><a class="rate">6</td>
        </tr>
        <tr>
            <td><a class="rate">7</td>
        </tr>
        <tr>
            <td><a class="rate">8</td>
        </tr>
        <tr>
            <td><a class="rate">9</td>
        </tr>
        <tr>
            <td><a class="rate">10</td>
            <td>
                <p class="last">Extremely Likely</p>
            </td>
        </tr>
    </table>

I know about flexbox and other css properties that can help, but from what I've tried nothing seems to help align the text properly without having to compromise on something else. All help and advice is appreciated!

CodePudding user response：

<div class="rate-container">
  <div>
    <a class="rate">1</a>
    <p class="first">Extremely Unlikely</p>
  </div>
  <a class="rate">2</a>
  <a class="rate">3</a>
  <a class="rate">4</a>
  <a class="rate">5</a>
  <a class="rate">6</a>
  <a class="rate">7</a>
  <a class="rate">8</a>
  <a class="rate">9</a>
  <div>
    <a class="rate">10</a>
    <p class="first">Extremely Likely</p>
  </div>
</div>

CSS:

div.rate-container {
        display: flex;
        flex-direction: column;
        }
        p,a {
            display: inline;
        }

You could actually nevermind the whole flex div, remove the other inner divs, just the the p and a displays to inline, and use <br>s to break the lines. <br>s are frowned upon tho, mostly because they clutter the code(and they would in this case)

CodePudding user response：

You could take a slightly different approach as the text is just annotating the numbers rather than being part of the content, by using pseudo elements on those values you wish to annotate.

This snippet puts an after pseudo element on the first and last child of your initial list and removes the p elements from the HTML.

.rate {
  display: block;
}

.rate-container a:first-child::after {
  content: '\00a0 \00a0 Extremely unlikely';
}

.rate-container a:last-child::after {
  content: '\00a0 Extremely likely';
}

<div class="rate-container">
  <a class="rate">1</a>
  <a class="rate">2</a>
  <a class="rate">3</a>
  <a class="rate">4</a>
  <a class="rate">5</a>
  <a class="rate">6</a>
  <a class="rate">7</a>
  <a class="rate">8</a>
  <a class="rate">9</a>
  <a class="rate">10</a>
</div>